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.
Note that the above buttons rely on JavaScript to work. If the latter is not enabled in your browser, you can still switch style sheets by using your built-in browser-provided facility. The style sheets should be listed in your browser as "sideonleft" and "sideonright".
For the curious, the JavaScript code for the switcher can be found in my article How to Use JavaScript to Change a Cascading Style Sheet (CSS) Dynamically. The article provides the full version of the script that allows the switch to be permanent. (The one used in this demo does not save your changes; each time you load this page, you will get the default left column navigation menu.)
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.
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. If you generate your own menu, you can make one with many more buttons if you wish.