Troubleshooters.Com® and Web Workmanship Present:

HTML/CSS/JS Quick Hacks

See the Troubleshooters.Com Bookstore.


Here are some web-construction quick hacks:

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

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

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:


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

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:

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.

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>