Create a simple, cross browser centered 3 column fixed width CSS layout

. Tutorial

In web development, Cascading Style Sheets enable us to create the style and look of a web page. Today, I am going to show you a simple way to create a 3 column centered fixed width by using CSS that works in major browsers.

I use Dreamweaver CS3 as my main tool to create web layouts, but text editor can also be use to create layout too. Below is the screenshot of the 3 column layout and the demo html. Because it looks the same in many browsers tested, screenshot comparison is not provided.

Simple cross browser 3 column fixed width CSS layout

  • View demo (right click “Save Link As” to save)

The Basic Code

I use more codes because i need to separate the columns with background colors and specify the height, but basically the layout will work with the codes below:

CSS

body {margin: 0; padding: 0; text-align: center;}
     #container {width: 900px; margin: 0 auto;}
     #header {height: 100px;}
     #left {float: left; width: 200px;}
     #center {float: left; width: 500px;}
     #right {float: right; width: 200px;}
     #footer {clear: both; height: 50px;}

HTML

<div id="container">
     <div id="header"></div>
     <div id="left"></div>
     <div id="center"></div>
     <div id="right"></div>
     <div id="footer"></div>
</div>

Browsers Tested

I tested the layout and it works in browsers below. I am using Windows XP. Plus, I use IETester to enable me to test IE in multiple versions in a PC.

  • Firefox 2.0.0.13
  • Safari 3.1
  • Opera 9.27
  • Internet Explorer 7
  • Internet Explorer 6

So here is it, a simple solution to a 3 column centered fixed width layout. There is much more solutions than this (fixed and fluid), which was highlighted in Noupe’s 9 Timeless 3 Column Layout Techniques.

Similar Posts:

Comments