Using CSS

Centered Layout

To create a centered layout, we need to have a containing div, which we can position in the centre of the page. This div holds all the rest of the page content. In this example I will modify the 2 column layout, to sit within a centered 780 pixel space. This means, that at 800 x 600 resolution, the container will fill the space (leaving a 20 pixel gap for the scroll bar). At higher resolutions, the container will be centered within the page.

Step 1

Insert 3 divs into your html page so that 2 divs sit inside the third, and add some content to the inner divs so you can see them easily.

<body>
<div>
<div>This is left column</div>
<div>This is right column</div>
</div>
</body>

Step 2

Next, use the id attribute to name the divs. We need to do this so that we can reference each div from the style sheet. Remember, on any one page, each id must be unique.

<body>
<div id="container">
<div id="column1">This is left column</div>
<div id="column2">This is right column</div>
</div>
</body>

Step 3

Now it's time for the CSS styles. To reference an id in the html, we use a # in the css. The style for the container sets the width to 780 pixels, and also, sets the left and right margins to automatically size. The background is there so you can see the container position easily.

#container{
width: 780px;
margin-right: auto;
margin-left: auto;
background: #99FFCC;
}

Step 4

Add the floating styles to the CSS from 2 column layout for the inner divs.

#column1 {
float: left;
width: 30%;
background: #99CCFF;
}
#column2 {
float: right;
width: 69%;
background: #FFFFCC;
}

Step 4

If you haven't already done it, add the link from the <head> of the HTML page to the CSS Style sheet.

<head>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>

Step 5

View your page in a browser.

Internet Explorer

In Internet Explorer it should be centered and look like this. The green area in the centre is the container, which will be as big as the biggest inner div.

Adding additional text to one of the columns illustrates the point more clearly.

Firefox and other Mozilla Browsers

However, in Firefox and other Mozilla Browsers, such as Opera & Netscape, when a container contains only floating elements, it collapses to nothing, and you cannot see the background colour of the div.

If you want to always display a background colour, you need to add in a non-floating div to the html. I normally call this div 'ff' for FireFox Fix.

<body>
<div id="container">
<div id="column1">This is left column</div>
<div id="column2">This is right column</div>
<div id="ff"></div>
</div>
</body>

In addition, add a clear style to the ff div. This means that it 'clears' all the floating divs, and will sit beneath them, thus forcing the container to stretch around the floating elements.

#ff{
clear:both;
}

You should now be able to see the container background colour in Firefox: