Basic 3 Column Fixed Width CSS LayoutBasic 3 Column Fixed Width CSS Layout

Posted January 15th, 2009 in HTML and CSS

This post looks at how to create a very basic fixes width three column layout using CSS where the footer will appear below the three columns no matter how long each of the columns is.

In the coming weeks (HTML/CSS articles are posted every Thursday) I will expand this layout and make it more complex, including a min-width/max-width central column; dealing with backgrounds; making it fully elastic to use the full screen width etc. Make sure you subsribe to my RSS feed at the end of this post so you don't miss out.

Example

A very plain example of this layout can be found here. Intially the three columns are all the same height but there are links to add content to the columns to make them different heights using jQuery's .append() function (more about how to do this in my dynamically get and set an elements content with jQuery post).

Viewing the source of that example page will show the basic skeleton with comments for all the CSS. Please remember that this is just a very basic example.

The HTML

Here's the very basic HTML for this layout of what would appear between the <body> tags:

<div id="container">

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

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

    <div class="clear"></div>

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

</div>

As you can see, the left and right columns appear above the main content area in the HTML source. This may or may not be a consideration for you using this layout.

The CSS

The basic CSS with no styling is below. After that some comments about what each element does.

#container {
    width: 700px;
}

#left {
    float: left;
    width: 150px;
}

#content {
    padding: 0 210px 0 160px;
}

#right {
    float: right;
    width: 200px;
}

.clear {
    clear: both;
}

The widths can be whatever you want them to be, the pixel amounts in the above are just examples.

The #content left and right padding needs to be #left width and #right width respectively plus whatever extra left-right padding you want for the main content area. In the example above #content effectively has 10 pixels of padding left and right.

The .clear div clears the floats and makes sure #footer always appears below the three columns no matter how high they are.

Background/border issues

The background colours/images and CSS borders (see the example and add content to the columns to see) won't go all the way to the bottom when the columns are different sizes, and the #content's background appears behind both the #left and #right divs. This may or may not be a problem for you.

However, because this is a fixed width it's easy enough to make a background image with borders/background colours in the image, and assign it to #container. I will look at this in next week's post. Make sure you subscribe to my RSS feed (see below) so you know when this has been posted.

Related posts:

Share or Bookmark

Share or Bookmark this page using the following services. You will need to have an account with the selected service in order to post links or bookmark this page.

Subscribe or Follow

Subscribe via RSS or email, or follow me on Facebook or Twitter below. The RSS icon takes you through to Feedburner where you can select the service or application to use.

Comments

blog comments powered by Disqus