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. 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.

Note that for the above to work, JavaScript needs to be enabled in your browser. If this is not the case, 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.

Two Column Layout Demo

What is This Page About?

Placement of the Side Column

Mobile Friendly Two Column Layout

Shortcut to Making a Two Column Layout

Navigation Menu