Floated Div Columns

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.)

• Reduce the width of your browser to exactly 600-pixels (600px). (Reference the “viewport width” box in the upper-left corner of your screen.)
• You will notice that a red border appears at the top and bottom of what had previously been “rows” of “vertical columns” when your browser was at a width of 601-pixels or higher.
• Now “refresh” this web page. (There should be an icon somewhere along the top of your browser for refreshing a web page.)
• You will see text in “red,” and a background-color in “light green,” in the second horizontal column of the first row. The “light-green” background-color indicates which column has the most height of the three horizontal columns in the first row, and the text colored “red” indicates which column has the most text-content.
  The second horizontal column of the first row has two lines of text, while the other two columns have only one line of text. The “wrapping” of the text down to a second line is what gives the second column its added height.
• This second column of the first row will now become the “Controller Column” for the other two columns in the row. The “height” of the other two columns in the row will now mirror the height of the “Controller Column” at widths above 600-pixels—when all columns are displaying vertically—thus keeping the entire first row at a constant height. (Normally, columns with less text-content in a row of floated columns have less height than columns with more text-content, creating an uneven visual display of the row.)
• The second and third rows at the top of this web page, when displayed horizontally, are a different story. All of the columns in the second and third rows are showing only one line of text at a width of 600-pixels. When you “resize” your browser to a smaller width (from the 600-pixels width you are currently at), one of the lines of text in the columns of each row will be the first to “wrap” around to create a second line. This column in each row will become the “Controller Column” for the other columns in that row when you once again widen your browser beyond 600-pixels in width.
• But your browser has no way of knowing which single line of text, in which column, in each row, will be the first to “wrap” around to a second line of text (and thus become the “Controller Column” for its row) if you had initially “loaded” this web page at a 600-pixels width, or had “refreshed” this web page at a 600-pixels width.
  
  But you can help your browser know which column is the “Controller Column” for each row by adding a “fixer-div” to the end of the text in those designated columns (that “wrapped” first) mentioned in the step above. [The floated-div-auto-height.js file assumes that the first column on the left/top of two or more columns tied for “highest column” in a row is the “Controller Column”—but in row two above, for example, it is the third column that contains the most text-content, as evidenced by its “wrapping” around to a second line when you “resize” the browser down in width. And so the third column in row two is the one requiring a “fixer-div” be added to the end of its text-content.]
• This is what the “fixer-div” looks like:
• <div style="height: 1px"></div>
• That additional “1-pixel (1px)” increase in height will give the third column in row two a greater height over the other two columns (when displayed horizontally at a width of 600-pixels); and designate to the floated-div-auto-height.js file that the third column in row two is now the “Controller Column.”
• You can see the “fixer-div” added to the “Controller Column” of the second row, and the “fixer-div” added to the second column of the third row (in the “Floated Div Columns” example above) by doing a “View page source” on this web page.
• Here is a basic, one row, floated div example page that does not require a “fixer-div” in any column. Doing a “View page source” on this example web page will reveal the essential, complimentary HTML and CSS code that the floated-div-auto-height.js file requires in order to do its job.
• At the top of this floated-div-auto-height.js .txt file you can read about the various “testing features” that you have observed on this web page (i.e. the red text, the light-green background-color, the “viewport width” box, and the web page “stats” that are dynamically updated at the top of this web page whenever you “resize” the web page)—all features that can be “turned on” for web-page testing and “turned off” before your web page goes “live.”
• You can see the same web page “stats” at any time on the “Console” tab of your browser’s Development Tool.
• You can also see the difference between two, identical rows of columns on this floated div 'fixer-div' example page, where the first row on the page has a “fixer-div” added to its third column, but the second row does not have that needed “fixer-div” added to its third column. You can observe the third column in the second row “break” when you “refresh” your browser at the 600-pixels-width mark ... and then increase the width of your browser ... while the third column in the first row remains intact!
• Enjoy floated-div-auto-height.js.