Have you ever wanted a layout with 3 equal columns centred in the page without the use of tables and just using CSS? eg:
Well the following tutorial will help you achieve this and is compatible with IE 6/7, FF, Opera, Netscape and Safari (PC)
OK, what we will start off with is a basic XHTML transitional web page with the infamous “Lorem ipsum” as content. You will notice the following <div> tags in the page:
- header - this section is the header of the page, where the contents are usually a logo, sometimes a quick search and contact details
- container - the container plays an important role in this page, it is what helps us centre the 3 columns. The following columns are all contained in between the containers opening and closing <div> :
- navigation - were all the links for the site will be allocated
- centre - were the main content of the site is to be placed
- rightSide - this column can be used for adverts, rss feeds etc
- footer - this is the section located at the bottom of the page.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>3 Column Fixed Width layout</title>
<link type="text/css" rel="stylesheet" href="style.css" media="screen" />
</head>
<body>
<div id="header">HEADER</div>
<div id="container">
<div id="navigation">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed molestie mauris id wisi. Morbi nisl urna, sollicitudin vitae, mattis non, sagittis eu, mauris. Nulla tellus. In faucibus mi id lorem. Quisque quis tortor et odio scelerisque consequat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae& Proin
</div>
<div id="centre">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed molestie mauris id wisi. Morbi nisl urna, sollicitudin vitae, mattis non, sagittis eu, mauris. Nulla tellus. In faucibus mi id lorem. Quisque quis tortor et odio scelerisque consequat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae& Proin
</p>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed molestie mauris id wisi. Morbi nisl urna, sollicitudin vitae, mattis non, sagittis eu, mauris. Nulla tellus. In faucibus mi id lorem. Quisque quis tortor et odio scelerisque consequat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae& Proin
</p>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed molestie mauris id wisi. Morbi nisl urna, sollicitudin vitae, mattis non, sagittis eu, mauris. Nulla tellus. In faucibus mi id lorem. Quisque quis tortor et odio scelerisque consequat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae& Proin
</p>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed molestie mauris id wisi. Morbi nisl urna, sollicitudin vitae, mattis non, sagittis eu, mauris. Nulla tellus. In faucibus mi id lorem. Quisque quis tortor et odio scelerisque consequat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae& Proin
</p>
</div>
<div id="rightSide">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed molestie mauris id wisi. Morbi nisl urna, sollicitudin vitae, mattis non, sagittis eu, mauris. Nulla tellus. In faucibus mi id lorem. Quisque quis tortor et odio scelerisque consequat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae& Proin
</div>
</div>
<div id="footer">FOOTER</div>
</body>
</html>
Now for the CSS. The CSS will position all the columns, header and footer into the centre of the page. You will notice that there is no body tag called in the CSS, reason being there is no need for the positioning of these elements.
#header, #footer {
width:770px;
margin:0px auto 0px auto;
height:50px;
background-color:#dedede;
}
#navigation, #rightSide {
width:150px;
}
#navigation {
float:left;
background-color:blue;
padding:0px 0px 1000px 0px;
margin:0px 0px -1000px 0px;
}
#rightSide {
float:right;
background-color:red;
padding:0px 0px 1000px 0px;
margin:0px 0px -1000px 0px;
}
#container {
width:770px;
margin:0px auto 0px auto;
overflow:hidden;
}
#centre {
width:470px;
float:left;
background-color:green;
}
#footer {
clear:both;
}
Right, you maybe looking at the CSS and thinking WTF! So I am going to try and explain what the properties do (things like width, height and colour I am going to leave as these are pretty self explanatory).
margin:0px auto 0px auto;
What the above CSS does, is it basically helps centre the section thats calling it into the middle of the page. This only works once you have specified a width eg. width:770px; Once the width has been specified then the section appends equal margins either side so therefore centring it.
css property: float
float:left;
float will specify whether a column/element should float, shifting it to the right or left with surrounding content flowing around it. This allows us the have the 3 columns side by side.
css property: clear
clear:both;
This basically clears all floated elements and places the footer element underneath our 3 columns, otherwise the footer would try to surround the floating content causing the footer to come out of position.
padding:0px 0px 1000px 0px;
margin:0px 0px -1000px 0px;
You are probably wondering why I have added 1000 pixels to each of the columns but then removed them again using the margin properties. Simple, this is what helps us expand the columns to be the same length as the centre column (as this is where all the content is generally placed and is longer than both columns). You will notice when these are in place the page will expand to the full 1000px and not to the bottom of the centre column, to get around this just add the overflow property
css property: overflow
overflow:hidden;
The overflow property allows us to manipulate the areas of content that do not fit inside a column or box. In our case it will be the two columns we have assigned the 1000px padding too in the CSS and will shorten them back to the longest column (in our case it will be the centre section).
