How to Create a Two Column Layout for Your Website Using CSS

2 Columns Using Float, with Optional Header and Footer


How to Design a Two Column Layout for Your Website Using CSS

by Christopher Heng, thesitewizard.com

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.

Prerequisites

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. My Dreamweaver Tutorial takes you through the steps of creating a CSS-based two column website with this editor.

My tutorials for the free web editors KompoZer and Nvu may also be used to create 2 column sites, albeit not using CSS. The tutorial for BlueGriffon (another free web editor), however, does use CSS to produce the 2 column effect.

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.

Compatibility

The two-column CSS given here has been tested to work on Internet Explorer 6 and 7, Firefox, Opera, and 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="container">
  <div id="navbar">Navigation</div>
  <div id="content">Content here</div>
</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.

#content {
  margin-left:  20%;
}
#navbar {
  float: left;
  width: 20%;
}

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:

  1. 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 margin-left and 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.

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

    #content {
      margin-right: 20% ;
    }
    #navbar {
      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 Vs 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.

#container {
  width: 800px ;
}
#content {
  margin-left:  200px;
}
#navbar {
  float: left;
  width: 200px;
}

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:

#container {
  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" "http://www.w3.org/TR/html4/loose.dtd">

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="layout">
  <div id="header">Top Header</div>
  <div id="navbar">Navigation</div>
  <div id="content">Content here</div>
  <div id="footer">Bottom Footer</div>
</div>

Add the following CSS code to your existing style sheet. Simply place it after the styles you created above.

#footer {
  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.

#header {
  text-align: center ;
}

The same text-align property can be added to the footer to centre the text there as well, if you wish.

Miscellaneous Matters

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

  2. 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 content, navbar, header and footer DIV selectors.

    padding: 4px ;

    The exact width of the padding is of course up to you. The 4px given here is just an example.

Conclusion

With the CSS code given above, you're now on your way to creating your 2-column website. You may also wish to check out the CSS navigation menu bar wizard as well, if you wish to add a CSS-driven navigation menu bar to your side panel that has mouse-over hover effects.

Copyright © 2008-2014 by Christopher Heng. All rights reserved.
Get more free tips and articles like this, on web design, promotion, revenue and scripting, from http://www.thesitewizard.com/.

thesitewizard™ News Feed (RSS Site Feed)  Subscribe to thesitewizard.com newsfeed

Do you find this article useful? You can learn of new articles and scripts that are published on thesitewizard.com by subscribing to the RSS feed. Simply point your RSS feed reader or a browser that supports RSS feeds at http://www.thesitewizard.com/thesitewizard.xml. You can read more about how to subscribe to RSS site feeds from my RSS FAQ.

Please Do Not Reprint This Article

This article is copyrighted. Please do not reproduce this article in whole or part, in any form, without obtaining my written permission.

Related Pages

New Articles

Popular Articles

How to Link to This Page

It will appear on your page as:

How to Design a Two Column Layout for Your Website Using CSS





Home
Donate
Contact Us
Link to Us
Topics
Site Map

Getting Started
Web Design
Search Engines
Revenue Making
Domains
Web Hosting
Blogging
JavaScripts
PHP
Perl / CGI
HTML
CSS
.htaccess / Apache
Newsletters
General
Seasonal
Reviews
FAQs
Wizards

 

 
Free webmasters and programmers resources, scripts and tutorials
 
HowtoHaven.com: Free How-To Guides
 
Site Design Tips at thesitewizard.com
Find this site useful?
Please link to us.