about Design & Development

Two column layout using css

Pro Staff 16 years ago 2 min read

o start with we need to design a structure of the layout.
Please copy and paste the following structure in between the <body></body> tags of your page.

<div id=”wrapper”>
<div id=”header”></div>
<div id=”container”>
<div id=”left”>
<ul id=”nav”>
<li><a href=”#”>Link 1</a></li>
<li><a href=”#”>Link 2</a></li>
<li><a href=”#”>Link 3</a></li>
<li><a href=”#”>Link 4</a></li>
<li><a href=”#”>Link 5</a></li>
</ul>
</div>
<div id=”right”></div>
<div class=”clearer”></div>
</div>
<div id=”footer”><p>©</p></div>
</div>

Create a small, 1px by 1px image with some background (it would be best to give it the same colour as a border of your template) and save it as divider.gif.

Now create a style sheet and link it to our document.
Open style sheet and copy and paste the following content.

html, body {
margin: 0px;
padding: 0px;
}
body {
font-family: Verdana, Arial, sans-serif;
font-size: 11px;
color: #3F4554;
text-align: center;
line-height: 1.8em;
}
#wrapper {
width: 800px;
margin: 15px auto 15px auto;
padding: 0px;
text-align: left;
border: solid 1px #dadada;
}
#header {
width: 100%;
height: 70px;
background-color: #f1f1f1;
border-bottom: solid 1px #dadada;
}
#container {
width: 100%;
height: auto;
margin: 0px;
padding:2px 0px;
background-image: url(divider.gif);
background-repeat: repeat-y;
background-position: 200px 0px;
}
#left {
width: 160px;
height: auto;
float: left;
padding: 20px;
margin: 0px;
}
#right {
width: 530px;
height: auto;
float: left;
padding: 20px 50px 20px 20px;
margin: 0px;
}
#right p {
margin: 0px;
}
.clearer {
font-size: 0px;
height: 0px;
width: 100%;
display: block;
clear: both;
}
#nav {
margin: 0px;
padding: 0px;
list-style: none;
list-style-image: none;
}
#nav li {
margin: 0px;
padding: 0px;
display: inline;
}
#nav li a:link, #nav li a:visited, #nav li a:active {
color:#3F4554;
text-decoration: none;
display: block;
margin: 0px;
padding: 0px;
width: 160px;
}
#nav li a:hover {
color: #ccc;
text-decoration: none;
}
#footer {
padding: 0px;
margin: 0px;
border-top: solid 1px #dadada;
text-align: center;
}
#footer p {
margin: 0px auto 0px auto;
padding: 10px 0px 10px 0px;
color: #aaa;
}
#footer a:link, #footer a:visited, #footer a:active {
color: #aaa;
text-decoration: none;
}
#footer a:hover {
color: #ccc;
text-decoration: none;
}

The whole magic with the vertical line is done by using the background image in #container and giving it the position and repeat-y property (bolded code).

Now regardless whether the left of right column has more content, the line in between the columns will always be going from the top to the bottom of the page container.