What is This Page About?
This is a demo page for the tutorial on How to Design a Two Column Layout Using CSS found on thesitewizard.com. In this demo, the navigation (or side) column is placed on one side, with the content column on the other. A "header" section spans both columns on the top and a "footer" at the bottom.
For an explanation of the CSS code used, along with how you can customize it for your site, please see the main tutorial as well as the article on How to Make a Two Column Website Layout Mobile-Friendly.
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: