Replacing table layout with CSS
I am a great believer in learning from example. I've written a simple CSS style sheet that can be used in two or three column layouts with a header and footer. You are welcome to use that to layout your web site, or just play around with it to learn CSS.
Download the layout.css style sheet and save it in the same directory as your html files.
Linking to an external CSS file
We've written a standard html document and included the layout.css file from a line of code in the <head>. We'll keep adding to the html on this page, and will highlight new code in blue.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>CSS Layout</title>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
<link href="layout.css" rel="stylesheet" type="text/css">
</head>
<body>
</body>
</html>
Laying out columns
There are two ways to lay out columns in CSS: Absolute positioning and Relative positioning. Both methods are very flexible, but unfortunately Dreamweaver MX and some browsers get very confused by relative positioning so I'll only consider absolute positioning in this document.
Using the <div> tag
Let's go straight into the layout for this page. It was created using <div> tags. <div> a way of separating data in an html page.
Let's make a page using three divs. It's a standard html page that you can use with our layout.css file. We've highlighted the new bits of code in blue.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>CSS Layout</title>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
<link href="layout.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="header">Header - My title will go up here.</div>
<div id="centreposition">Centreposition - This is the centre of the page.</div>
<div id="footer">Footer - This is the footer.</div>
</body>
</html>
Notice we are calling the style from the style sheet using an "ID=". This works a lot better for layout than the alternative "class=" method. We have set background color in the style sheet so the divs look different:
Header - My title will go up here. |
| Centreposition - This is the centre of the page. |
| Footer - This is the footer. |
Each div starts on a new line. That's going to come in handy, but there isn't a navigation column on the page yet. Let's make room for one.
Using Padding
We've set a value for padding on the centre div in the CSS file. The html code still looks the same, we've just altered the CSS file so that anything inside the centreposition div is indented 20% into the page. This makes room for the navigation column.
| Header - My title will go up here. |
|
| Centreposition - This is the centre of the page. |
|
| Footer - This is the footer. |
|
Inserting navigation
The navigation can then be inserted as an absolutely positioned <div> in the space we created:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>CSS Layout</title>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
<link href="layout.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="header">Header - My title will go up here.</div>
<div id="centreposition">Centreposition - This is the centre of the page.</div>
<div id="footer">Footer - This is the footer.</div>
<div id="left">Left - for the navigation<div>
</body>
</html>
We've just added an extra div beneath the other divs. We can place the navigation anywhere within the code of the html page, and it will always appear in the right place. That's because we've used absolute positioning in the CSS file.
| Header - My title will go up here. |
|
| This is the left navigation |
Centreposition - This is the centre of the page. |
| Footer - This is the footer. |
|
OK that's great too, but the background to the left navigation only goes halfway down the page, then the colour is the same of the centreposition div. The way around this is to put another div inside the centreposition div.
Putting a div inside a div
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>CSS Layout</title>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
<link href="layout.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="header">Header - My title will go up here.</div>
<div id="centreposition">
<div id="centrecontent">
Centrecontent - This is the new centre of the page.
</div>
</div>
<div id="footer">Footer - This is the footer.</div>
<div id="left">Left - for the navigation<div>
</body>
</html>
| Header - My title will go up here. |
|
| Left - for the navigation |
Centrecontent - This is the new centre of the page. |
| Footer - This is the footer. |
|
The position of the new centrecontent div is inherited from the centreposition div, but we've specified a new values for border and background in the new div.
Finishing off
All that remains is to set the left navigation background as transparent so it will inherit the background color from the layer beneath it.
| Header - My title will go up here. |
|
| Left - for the navigation |
Centrecontent - This is the new centre of the page. |
| Footer - This is the footer. |
|
The three column layout
To add a column on the right, all we need to do is add padding to the right in the centreposition style in the CSS style sheet, then add another absolutely positioned <div> like we did for the navigation on the left.
How we've used CSS
Our header div is blank. All of the information in our header is in the form of additional absolutely positioned divs. The header div is only there to force the main part of the page downwards by 100 pixels.
We've added a column on the right, all we needed to do was add padding to the right in the "#centreposition" style in the CSS style sheet, then add another absolutely positioned div like we did for the navigation on the left.
Find out more
The W3C are the guys that defined CSS in the first place. The W3C CSS home page contains a great deal of useful reference material.
The W3C site also contains full specifications for CSS2
Next > Formatting text using CSS
