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 found on thesitewizard.com.
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 so new, if you use an old 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 2 buttons. Obviously, if you generate your own menu, you can make one with many more buttons.
Linking to This Page
It will appear on your page as:
Two Column Layout Using Flexbox in HTML (Demo)
Other Demos on This Site
- Two Column Layout Demo
- Two Column Layout with a Header and Footer (Demo)
- One Column Fixed Width Layout Demo
- Feedback Form Script with CAPTCHA Demo Page
- Feedback Form Script with Invisible CAPTCHA Demo Page
- Feedback Form Script Demo Page
- HTML5 Audio Demo
- HTML5 Video Demo
Copyright © 2016-2018 by Christopher Heng. All rights reserved.
thesitewizard™ and fbdemo™ are trademarks of Christopher Heng.
This page was last updated on 24 April 2018.