Centering a div Element

Many methods for centering a div element depending on having the centered div contained within another div element. What's quicker, simpler and easier is to simply CSS style the div element with margin-left and margin-right set to auto. Be sure not to set any margins afterward which would undo those two margins. See the source html and the resulting web page as an example. Use your browser to view both the source code and the result.

Key Points

The div's attributes margin-left and margin-right must have value auto.
The div's attribute width or max-width must be declared and must be smaller than 100%.

Side By Side Elements

Back in the day we used tables to display elements side by side, but with the advent of small mobile devices and responsive web pages, best practices now restrict tables to things whose data is actually tablular. Using tables to spatially lay out content now brings nothing but heartache. For elements that are convenient to be side by side, but not absolutely necessarily side by side, we use the inline-block attribute plus. See the illustrated in html code and the resulting web page.

Note that with small mobile devices, the side by side elements will appear below each other, rather than on one line. This is normally the behavior you want.

Key Points

Attribute display must have valueinline-block
Attribute margin-bottomor margin-top should be sufficiently long that if the elements fold under each other, the reader can easily see that they're two different elements.
On wide screens this presentation shows elements side by side, left to right, with spare room on the right. As the screen narrows, the rightmost element(s) fold under the others.
This presentation is typically used on divs, but can be used on other elements such as "a" elements.

Left, Center and Right Elements On One Line

You might want to display elements side by side with one being left justified, one being center justified, and one being right justified, as follows:

Left just

Center just

Right just

The preceding is easily done with tables, but with the advent of small mobile devices and responsive web pages, best practices now restrict tables to tabular data. Notice the difference between this left/center/right layout and the side by side layout discussed earlier in this document. With the side by side layout, all columns are left justified, and there might be extra space to the right of the rightmost column. With the left/center/right layout, the columns consume the whole browser width, with text justification of left, center and right in the left, center and right columns, respectively. The left/center/right layout works beautifully for simple navigation bars.

The only way I've found so far to achieve the left/center/right layout is using a grid layout. For deeper information into grids ,see the Foldunder Grid Layouts article. Grid layouts can be made to fold under using the following CSS in their container:

grid-template-columns:
  repeat(auto-fit, 
    minmax(100px,1fr));

For further details, check out Web Workmanship's Grid Layout and Foldunder Grid Layout articles.

You can see the source html of a left/center/right layout. To see the result in a browser, click here.

Key Points

This is a grid design.
It consists of several grid items inside a grid container.
The grid container must have attribute display set to value grid.
The grid container must have attribute grid-template-columns set to valueauto auto auto. Notice there are no commas in the value.
- The three repetitions of "auto" mean there will be three columns: One for left, one for center, and one for right.
You can gain more information on this subject by visiting the Grid Layout and Foldunder Grid Layout articles.

Always On Top Div

On some web pages it's handy to have a div element that's always on top of the screen, no matter how much you scroll. Such an always-on-top div makes an outstanding home for a simple navigator bar. Back in the bad old days always-on-top was achieved with frames, the most obnoxious web phenomenon ever devised. Now the easiest way to accomplish this is with a fixed position div.

For details, check out this always-on-top equipped web page. Then look at this page's source code.

The key declarations to making a div always on top are the following:

position: fixed;
top:0px;

Javascript innerHTML Anomalies

If you want to change the contents of a div, let's say divResults, using div.innerHTML(), you must take care because sometimes you need to take one or both of the following inobvious steps.

divResults.innerHTML = ""; before starting to modify your div.
If you need to append multiple strings, append them to a variable (for example s ) and then perform command divResults.innerHTML=s. It seems like you should be able to append directly to divResults.innerHTML, but doing so sometimes doesn't work.

Looping Through an HTMLCollection in Javascript

The Javascript object returned by getElementsByTagName() or getElementsByClassName() is NOT an array and doesn't behave like an array. All sorts of things that you would think should work on such an object don't work because it's not really an array. You can get it to work with Query Selectors, but if you don't want to use those, the simplest and most reliable way is to iterate using a counter that you compare to the collection's length.

The following is an actual Javascript that correctly loops through an HTMLCollection (call it divColl ) returned by document.getElementsByTagName() to append the text within each div to string s, complete with paragraph numbers:

  let divColl=document.getElementsByTagName("p");
  
  /* WARNING: The next 5 lines are one of the few foolproof ways
     to iterate an HTMLCollection object. Trying to iterate it
     like an array with forEach and the like fails miserably. */
  let s = "";
  let i=0;
  for (i=0; i < divColl.length; i++){
    s+="<p>Pgph "+i.toString()+": "+divColl[i].innerHTML+"</p>";
  }

The output of the preceding would be a series of lines with the following format:

<p>Pgph 4: line4 string</p>