Two column layout using css and divider image

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. 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
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.

Sebastian Sulinski

Sebastian SulinskiSebastian Sulinski is a web designer/developer with over 8 years experience. Education: BTEC HNC in Computing (Business Information Technology) followed by a Degree in Digital Media Development.
Sebastian is the director of Core Media Design Limited in Frome, Somerset.

See All Postings From Sebastian Sulinski >>

Comments

2 column layout

November 15, 2008 by Michael Walmsley

Sebastian, thanks for that tutorial.

I have a problem with it. i want to be able to hide the left column, so dont want a background image but a border on the right of the left div. in your solution the left div is still only small but i want the left div to be 100% of its parent, the container. IF you understand what i mean.

 

Regards, Michael

You must me logged in to write a comment.