Two Column Layout Using Flexbox in HTML (Demo)

What is This Page About?

This is a demo page for the tutorial on How to Make a Two Column Website Layout Mobile-Friendly.

This page puts the navigation (or side) column DIV block before the one containing the content in the HTML code, and uses the CSS Flexbox implementations found in modern browsers to shift the block around depending on the window width of your web browser.

Since the CSS it uses is relatively new (give or take a decade or two), if you use a hopelessly obsolete browser, you will not be able to see this page as intended (see below).

Placement of the Side Column

On a desktop or laptop computer, the navigation menu should be displayed in its own column on the left of the window. If you view this page on a smartphone, or even if you just resize this window so that the width is smaller than 630 pixels, the navigation menu will appear below the content. This is in spite of the navigation DIV block being placed below the content block in the HTML.

Full Length Side Column without Ugly Hacks

Notice that flexbox allows me to make the navigation column the same height as the content column without using any ugly CSS code. This is accomplished with align-items: stretch.

Browser Compatibility

The flexbox CSS that this page uses is only supported in modern browsers.

As far as I know, you probably need Internet Explorer ("IE") 11, Microsoft Edge, Firefox 28 or later, Chrome 29 or later, Safari 9 or later, Opera 12.1x (Presto), Opera 17 (Webkit/Blink) or later, Safari (iOS version) 9.2 or later, Android 4.4 or later, Blackberry 10, Opera Mobile 12.1 or later, or IE mobile 11. Note that although some earlier versions of these browsers support some flexbox syntax, this page uses the current version of the CSS syntax with no backward-compatibility hacks as well as some constructs such as flex-flow which are not supported in those older browsers.

About the Navigation Menu

The navigation menu (the buttons in the side column) was generated using the Free Navigation Menu Wizard, also found on thesitewizard.com.

Since this is just a demo page, I have only made a menu with 3 buttons. Obviously, if you generate your own menu, you can make one with many more buttons.