2 column fixed width CSS layout with header and footer
The first lesson in our CSS layout tutorial series. We’ll learn how to build a basic 2 column CSS layout with header and footer.
First let’s build our html code, which is pretty straightforward
<div id=”wrapper”>
<div id=”header”>header</div>
<div id=”container”>
<div id=”left”>left</div>
<div id=”content”>content</div>
<div id=”footer”>footer</div>
</div>
</div>
The next step is the CSS, remember making CSS layouts is about positioning the elements, with the html code we have just defined the div areas of our page, they will get their position on the page with the help of CSS.
The following code is required to make the page centered in Internet Explorer, we are using auto margins to center the page, but IE does not support that method, text-align: center is used to center top-level divs
body {
text-align: center; /* required for centering the page in IE */
}
This part of code defines the boundaries of the page, we have added a border to it also, although it is not necessary. The left and right margins are set to auto, which is required for centering the page. We have aligned the text back to the left. Also at this step, if you want different colors for your columns, you can prepare an image with the same width as your page and colored accordingly to the width of your columns. This backround image is set to repeat from the top to the bottom.
#wrapper {
width: 760px;
margin: 0 auto; /* centering the page */
text-align: left;
background: url(bg.gif) repeat-y;
border: 1px solid #ebebeb;
}
The header of the page.
#header {
height: 50px;
background: #c4df9b;
}
We’ll use the float property to postion our columns. A floated element becomes a block-box, which can be set to the left or to the right on the current line.
Our left column is set to float left.
#left {
float: left;
width: 170px;
}
The main content area is set to float right
#content {
width: 588px;
float:right;
}
The footer. We have added clear: both to our footer which will ensure that no floated elements can get to any side of the footer.
#footer {
clear:both;
background: #c4df9b;
}
Putting it all together:
Your html file will look like this (save it as 2-col-fixed.html for eg.):
<!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>2 column css layout</title>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />
<link xhref=”layout.css” mce_href=”layout.css” rel=”stylesheet” type=”text/css” />
</head>
<body>
<div id=”wrapper”>
<div id=”header”>header</div>
<div id=”container”>
<div id=”left”>left</div>
<div id=”content”>content</div>
<div id=”footer”>footer</div>
</div>
</div>
</body>
</html>
And the CSS file (layout.css):
body {
text-align: center;
}
#wrapper {
width: 760px;
margin: 0 auto;
text-align: left;
background: url(bg.gif) repeat-y;
border: 1px solid #ebebeb;
}
#header {
height: 50px;
background: #c4df9b;
}
#left {
float: left;
width: 170px;
}
#content {
width: 588px;
float:right;
}
#footer {
clear:both;
background: #c4df9b;
}
Download this example.
In our next tutorial we’ll learn how to create a 3 column fixed width css layout.
March 8th, 2008 15:00
Nice tutorial. A good start for me…