If you are a practical web designer that is looking to use a fully compliant CSS layout that:

  • Validates (both the markup and the CSS)
  • Is easy to customize and (relatively easy to) understand
  • Maintains it's integrity with floats and clears in the columns
  • Does not contain incomprehensible CSS "hacks"

Then this layout is probably for you.

Click here for the list of other layouts that are available

If you are an HTML/markup purist and have objections to background graphics and additional markup, this isn't the layout for you.

-- Ryan Chapin, Nuts & Bolts Interactive, Inc.

3 Column: Fixed Side-Bars, Liquid Content Area, with Footer

Shortcomings:

This layout requires a border on the rightColumnBg div for the background color in the right column to render properly under IE 6 and 7. IE 6 required all edges to have a border, IE 7 just the top and bottom. The work around, as far as incorporating the border into your design, is to simply set the color of the border to match the background color of that edge of your browser window.

IE 6 also requires an additional <p> tag with an &nbsp; as the last line of markup in the sideBarLeft div. Without this "empty" p tag IE 6.0 takes the last line of HTML in that column's div and mangles it, rendering it towards the botto m of that column

See the comments in the CSS markup for more details

License

Creative Commons LicenseThis work is licensed under a Creative Commons Attribution 3.0 United States License.

Click here to read the full license

Valid XHTML 1.0 Transitional
Valid CSS!

This set of CSS layout columns came out of the need to have multi-column CSS layouts that would enable the use of dynamic content while maintaining the integrity of the page.

When I first started this project I found many different types of CSS layouts for multi-column pages, each of which fell apart when you started adding floats and clears in the columns.

This is a css layout that is designed to work across all of the major platforms and modern browser combinations, and designed such that you can include any sort of content in the different columns without it interfering with content and layout in other columns.

This CSS layout has been tested and works in the following OS/browser combinations.

There are very likely others that work that are not listed here. If you test additional OS/browser combinations and would like to have that information added to the list, click here to send me an e-mail.

  • Windows 2000, XP, Vista
    • Internet Explorer 6 (IE 6)
    • Internet Explorer 7 (IE 7)
    • Firefox 2.0.0.11 or greater
    • Opera 9.26 or greater
  • Mac OS X
    • Safari
    • Firefox 2.0.0.11 or greater
    • Opera 9.26
  • Linux
    • Firefox 2.0.0.11 or greater
    • Konqueror 3.5.8-32.fc8

Nuts & Bolts Interactive, Inc. is a web business services company that designs, builds, and hosts websites, e-mail, and other online business applications for small to medium sized businesses.