Course lectures : 1 of 1

Two column layout using pure css and divider image

Last updated: 20th June 2007

two column layoutcss two column layoutcss tutorialcss course

Some time ago I was trying to figure out how to create two column css layout where left column will be divided from the right one with a vertical line. It would be simple when you are trying to use a table layout - simply apply a left border to the right column and done, but I wanted to do completely table-less layout. When you use border in css for left or right <div> then depends on the length of the columns you might end up with a line shorter than the column with the content.

This tutorial explains how to design two column css layout with a line dividing left column from the right going through the whole length of the page, regardless of the length of the columns.

To 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 (or you can download it with the exercise files).

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.

COMMENTS

If you'd like to include code example please wrap your code within <pre><code> tags.


<pre>
<code>
function fullName(firstName, lastName)
{
    return firstName + ' ' + lastName;
}
</code>
</pre>