A lot of people have wanted to make 3 column CSS layouts but have always managed to run into problems ... like I did the first time I tried. With this tutorial I hope to show you how you can overcome the problems of liquid layouts to create your very own liquid layout which will fit into the screen of the browser at any resolution.
First off, we are going to create the HTML for a layout which has;
- A header.
- Left column.
- Middle column.
- Right column.
- And a footer.
The HTML for this would be;
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<title>3 Column CSS liquid layout.</title>
</head>
<body>
<div id="wrapper">
<div id="header"></div>
<div id="left"></div>
<div id="middle"></div>
<div id="right"></div>
<div id="footer"></div>
</div>
</body>
</html>
|
This will give us our basic structure. The next thing we are going to add is our CSS styles;
<style type="text/css">
* {
padding: 0px;
margin: 0px;
}
#wrapper {
width: 100%;
}
#header {
width: 100%;
height: 200px;
background: lightgreen;
}
#left {
width: 20%;
height: 400px;
background: blue;
float: left;
}
#middle {
width: 60%;
height: 400px;
background: orange;
float: left;
left: 20%;
}
#right {
width: 20%;
height: 400px;
background: yellow;
float: left;
left: 80%;
}
#footer {
width: 100%;
height: 100px;
background: green;
clear: both;
}
</style>
|
The style marked with an asterix simply denotes that all tags within the page will all have their styles padding and margin set to 0px;. The #wrapper is simply a container for the entire site layout.
To view an example of the working 3 column css liquid layout click here.