Two Column Layout Demo
What is This Page About?
This is a demo page for the tutorials How to Design a Two Column Layout Using CSS and How to Make a Two Column Website Layout Mobile-Friendly found on thesitewizard.com. In this demo, the navigation column (or side column) is placed on one side, with the content column on the other. For an explanation of the CSS code used, along with how you can customize it for your site, please see the main tutorials.
Placement of the Side Column
By default, when you reach this page, the navigation (side) column should be on the left. If you want to see a demo of the same layout with the menu on the right, click the appropriate button below. You can switch back and forth between the two layouts as you please.
Mobile Friendly Two Column Layout
The code on this page has also been made mobile-friendly, using the techniques given in How to Make a Mobile-Friendly Website: Responsive Design in CSS and How to Make a Two Column Website Layout Mobile-Friendly. If you were to view this page on a smartphone, you will get a single column layout. Of course, in such a situation, the buttons to switch the navigation column from one side to the other will not work.
Shortcut to Making a Two Column Layout
If you want a fast method for creating a two column layout that is at the same time mobile-friendly, use the Free Layout Wizard instead. It generates the HTML and CSS code for such a layout according to your specifications in just a few clicks of the mouse. It not only saves you the time figuring out the CSS needed to make it work, it also presents you with code that has been tested under multiple browsers, freeing you to concentrate on your content.
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. (Frankly, I just couldn't think of what else to put in that menu, since this demo site really doesn't have the usual stuff like a site map, etc, that you find on a real site like thesitewizard.com.)
Linking to This Page
It will appear on your page as:
Other Demos on This Site
- Two Column Layout with a Header and Footer (Demo)
- Two Column Layout Using Flexbox in HTML (Demo)
- One Column Fixed Width Layout Demo
- Feedback Form Script with CAPTCHA Demo Page
- Feedback Form Script Demo Page
Copyright © 2016 by Christopher Heng. All rights reserved.
thesitewizard™ and fbdemo™ are trademarks of Christopher Heng.
This page was last updated on 11 August 2016.