Floated Div Columns

Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet, consectetur adipiscing elit. Consectetur adipiscing elit. Ut ornareerat diam, ut blandit.
Consectetur adipiscing elit.
The last column in this row has a 'fixer-div' added—for a 600-pixel-width onload/refresh scenario.
The 'fixer-div' [ <div style="height: 1px"></div> ] sits at the bottom of the third column’s text in the file code.
The columns in this row have the same, smaller-sized text. One text-size for all columns in a row is recommended.
Lorem ipsum
This column has a 'fixer-div' added below the text, too!
Lorem ipsum
Lorem ipsum

It’s floated-div-auto-height.js!

[Test version - Text content only]

With floated-div-auto-height.js, you can keep all div columns the same height in a floated row of div columns—at any viewport width—even if one of those columns has more “text content” than the other columns in that row.

floated-div-auto-height.js will work with as many rows as you wish to add to your web page; and each row can have as many columns as you wish!

If you “resize” your browser’s width right now, narrower or wider, you can see floated-div-auto-height.js in action.

Use floated-div-auto-height.js for floated-divs “backup code” that will accommodate older browsers that do not support the newer “Flexbox Layout Module” or “CSS Grid Layout Module” ... or just shore-up your existing floated-divs code!

floated-div-auto-height.js works with text-only content inside each div column, and it is recommended that the same-sized text be used across all columns in a given row.

Breakpoint Check

This web page employs media queries to change the direction of the column display depending upon the width of the viewport in which this web page appears.

At a width of 600-pixels or less, the columns at the top of this web page are displayed horizontally; at a width of 601-pixels or more, the columns are displayed as narrower, vertical columns. (Your web page may specify a different “breakpoint width” for your media queries.)

Should someone open this web page in a device that has a viewport width of 600-pixels or less, and then rotate their device so that the viewport is now wider than 600-pixels in width, the floated-div-auto-height.js file will automatically assure that the horizontal-turned-vertical columns are all displayed at the same height.

To make sure that the transition from horizontal to vertical columns occurs smoothly—with all vertical columns having the same height—there is a step you must take when putting together your own web page (with floated-div-auto-height.js linked to it).

Here is what you do: (You can follow along by “resizing” this web page if you are viewing this web page on a wide-screen device, such as a laptop.)