There are many ways to create a two column layout using Cascading Style Sheets (CSS). This article takes you through the steps of using one method. The code given here will also allow you to add an optional header and footer that spans both columns to your pages should you wish.
For you to be able to use this article, you need to be able to code directly in both html and css. If this is not the case, you may prefer to use a visual web editor to design your site instead. For example, Dreamweaver comes with numerous templates to build 2 or 3 column websites using CSS. through dream weaver takes you through the steps of creating a CSS-based two column website with this editor.
Note that you do not have to be an expert in writing HTML or CSS code. You just need some basic working knowledge otherwise this tutorial will be incomprehensible.
Using Float to Define 2 Columns
While there are many methods of using CSS to create a two-column site, this tutorial uses the
float property to move one column to the side of another. In some ways, this method is more flexible than the absolute positioning method currently used on thesitewizard.com. It also allows you to add optional header and footer bars that span both columns if you wish.
The two-column CSS given here has been tested to work on Internet Explorer 6 and 7, Firefox, Opera, safari.
The HTML Code for a Basic 2 Column Website
The HTML part of the code is fairly simple. You basically need 2
div blocks, one for each column.
<div id="content">Content here</div>
The words “Navigation” and “Content here” are merely placeholders for the navigation side bar and main content. You should remove those words when you put your real content. The “container”
div block is merely a block enclosing both the two columns, and is useful if you want to apply certain styles that affect both columns as a unit.
The CSS Code for a Basic 2 Column Website Using a Fluid or Liquid Layout (Relative Widths)
If you want a website where your page widths expand or contract according to how large your visitor’s browser window is, you should use relative widths for your columns. At the time I write this, thesitewizard.com uses such a fluid layout for its right column as well. For example, if you change the size of your browser window, your browser will reformat the article column as far as possible to fit within the window (unless you resize it too small).
The CSS code for this is simple.
The CSS code has to go either into the
style section of your web page or an external style sheet. Here’s how to customize the code:
Changing the Width
The above style sets the side column for your navigation bar to 20% of the width of the browser window. Consequently, the left margin of the column containing your content is also set to start at 20% from the left edge of the browser window, otherwise your content will overlap with your navigation bar.
If you prefer that the width of the side column be wider or narrower, just change both the
width properties to the same value.
You can also use pixels for the width instead of a percentage. For example, to constrain your navigation bar column to 200 pixels, change each of the
20% values to
200px instead. The use of pixels is useful if you have a picture (such as a logo) that you want to place in the side column and don’t want the column to be narrower than your image.
How to Put the Navigation Bar on the Right
The code above puts the navigation menu in the left column, just like what you see on this page. If you prefer that the navigation menu be on the right, as is commonly found in blogs, change the code so that it looks like the following:
margin-right: 20% ;
float: right ;
width: 20% ;
Again, change “20%” to a value appropriate for your site.
The CSS Code for a Basic 2 Column Website Using a Fixed Layout
Although, at this point in time, I still use a relative width layout, or liquid layout as some people like to call it, the disadvantages that I mentioned in my article the great fixed versus relative width page layout debate are becoming more acute with the huge monitor resolutions that are now available. That is, if your visitors use a monitor that displays (say) over 2000 pixels horizontally, your paragraphs will be reduced to single lines swimming in an ocean of white space. This happens when the width is so wide that the entire paragraph can fit into one line.
As a result, some people prefer to fix the width of their window to some reasonable value, like 800 pixels or 1024 pixels. To use such a fixed layout for your site, set a width for the block containing both columns. Here’s where the empty container DIV that you created earlier comes in useful.
The following CSS code creates a page with a fixed width of 800 pixels.
width: 800px ;
However, if you do the above, and your site appears in a browser window wider than 800 pixels, you will find that both your columns will be flushed to the left of the window, leaving a sea of white space on the right of the screen. What you want, in such a case, is for both of your columns to be centred in the browser window.
The standards-compliant way of centering a block is given below:
width: 800px ;
margin-left: auto ;
margin-right: auto ;
For this code to work in IE 6 and 7, you must have a valid Document Type Definition (“DTD”), or DOCTYPE, for your web page to avoid triggering IE 6/7’s backward-compatibility mode (also known as Quirks mode to most webmasters). For example, the HTML 4.01 transitional DTD is as follows:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
The left and right margins are set to
auto which causes standards-compliant browsers to give them both an equal value, effectively centering the block.
How to Put a Top Header or a Footer Spanning Both Columns on a 2 Column Site
Some sites have a top header spanning both columns. They may either place the site’s logo or name here, or, perhaps even banner advertisements or both. In the same way, some sites also include a footer that span both columns. Among other things, the footer may be used for things like copyright notices.
To use a header and footer using this 2-column layout, modify your HTML code as follows.
<div id="header">Top Header</div>
<div id="content">Content here</div>
<div id="footer">Bottom Footer</div>
Add the following CSS code to your existing style sheet. Simply place it after the styles you created above.
clear: both ;
If you want the text in your header to be centred, add the following. Otherwise, there’s no need to define a header style.
text-align: center ;
text-align property can be added to the footer to centre the text there as well, if you wish.
Top Line Alignment Issues
You will probably find that IE 6 and 7 do not align the top lines of your left and right columns in the same way as all the other browsers. If your site design happens to be alignment-sensitive, you may want to use the conditional includes described in the article How to Use Different CSS Style Sheets For Different Browsers (and How to Hide CSS Code from Older Browsers) to position your text specifically for those browsers. It’s best to specifically position the code for IE 6 and 7 alone (and not all IE versions), since IE 8 and above are actually CSS standards compliant, so if you position it for all IE versions, your site design will break in the modern IE versions.
Text and Graphics Go Right to the Edge
The code given above merely provides the basic layout. As it stands, your text and graphics will go right to the edge of each column. One way to make some space between the text and the edges is to add the following property to your
footer DIV selectors.
The exact width of the padding is of course up to you. The
4px given here is just an example