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.
A degree in health studies can include a variety of remedies with certain issues as well as the best start on a career path in health and social care,
Individuals with ADHD can thrive and excel in the workplace, despite common misconceptions. Learn how to harness your unique strengths and overcome ch
The Learning Edge, our weekly newsletter at Lurnable, presents the latest education news and industry insights in one place. Read more.
Discover the John Locke Institute's prestigious essay competition, offering students the chance to explore complex ideas, develop critical thinking s
NEED HELP?
2K Views
Report Spam
9 Answers
