CSS tutorials
- Two column layout using pure css and divider image
- Two column layout using css and divider image
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. See it in action: Demo
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="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.
You can also get this image from here:
Now create a style sheet and link it to our document.
Open style sheet and copy and paste the following content.
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.
- Thank you for subscribing to our newsletter.
- To complete registration please click on the link in the email which has been sent to you.
- Invalid first name
- Invalid last name
- Invalid email address
Website Design Company | Website Design Company Sussex | Website Design Company Chichester | Website Design Packages | Tutorials Resources | Articles | Contact
© Web Design Tutorials – Sebastian Sulinski