3 Column Layout in CSS

One of the more difficult things I've found in creating decent web sites, is getting a three column, plus header and footer layout going without using tables.  Tables are great and all, but very inefficient, and not very accessible.  Getting the three column layout in CSS to work right takes a bit of work, but once its been done, its super easy to use and play with.  Tie that in with master pages, and themes and you've got a super accessible, easy to modify web site, that is XHTML compliant.

Lets start with the style sheet for the page:

body
{
margin: 0px;
padding: 0px;
}

#header
{
height: 30px;
background: blue;
padding: 10px;
}

#leftCol
{
position: absolute;
top: 50px;
left: 0px;
width: 20%;
background: red;
padding: 10px;
}

#rightCol
{
position: absolute;
top: 50px;
right: 0px;
width: 20%;
background: green;
padding: 10px;
}

#mainCol
{
margin-left: 25%;
margin-right: 25%;
}

#footer
{
margin-left: 25%;
margin-right: 25%;
padding: 15px;
background: yellow;
}

I've added the colours in the columns, header and footer so that you can easily see where things are coming from.  Next, we need to create the html for the page.  This is probably the easiest part:

<div id="header">
header
</div>

<div id="leftCol">
left
</div>

<div id="mainCol">
the quick brown fox jumped over the slow blue turtle
</div>

<div id="rightCol">
right
</div>

<div id="footer">
footer
</div>

And there you have it, a 3 column, plus header and footer layout!  You can see the sample https://www.nocommonground.com/blogSamples/3col.htm

Comments

• Anonymous
  June 14, 2005
  When you say that "Tables are great and all, but very inefficient", what exactly do you mean?
• Anonymous
  June 15, 2005
  Tables are inefficient for a couple of reasons.
  
  First, if you look at the total number of bytes sent for this layout, vs a table with the same layout, you're most likely looking at more code. The number of td's, tr's, and such start to add up rather quickly.
  
  Secondly, with this setup, with the table in a CSS style sheet, if you want to put this same table on a second form, you don't need to re-code it, just simply use the html and refer to the style sheet. Again, saving re-coding, and the clients machine should already have the CSS stylesheet cached, so they don't have to pull it down again.
  
  Reducing bandwidth may not be a big deal for some smaller websites, but think of websites like MSDN, or Microsoft.com, where all of that bandwidth adds up, and must be paid for. If we can reduce the bandwidth sent to each individual user, we can increase the number of users.
• Anonymous
  June 02, 2009
  PingBack from http://patiochairsite.info/story.php?id=27530