About a year and a half ago I was building a style guide at LexisNexis. Well my job was really to write it but I like to get my hands dirty to took the opportunity to build the online guidelines too.

I decided to use a left-hand column for the navigation leaving the top of the page for titles. When it came to building the page structure I ran in to a problem in that I wanted the dividing line to run the height of the page regardless of the content.

The issue with this is that if you set a border to the left-hand column it only runs as long as the the column has content. This clearly leads to inconsistency. At the time I searched around online and was unable to find a solution, even discussing the problem with the webdev team but no one had a solution.

Then it came to me. An answer to a problem that I think most developers must have run in to but at the time had no documentation.
Andrea Hill at LexisNexis recently pointed me to a new article on AListApart which deals with pretty much the same issue. I never documented it at the time because I thought everyone else would have found the solution too but I guess not so here it is…

Assuming you have a 2 column layout, you simply need to give both columns a matching border value, say 1px solid #666. The left column has it on the right and floats left. The right column has it on the left and has the appropriate margin to push it out to the right of the left column so that the two borders over lap. Simple. Note that the left column has a defined width be it % or fixed. The right column has no width defined. This is basically to tackle IE 6 which will push the right column out of sync if width is set.

However, that is all good and well if you use the same background colour across the width of your site. If you don’t I suggest using a background image which is the exact width of the left column and 1px high. The last pixel of the image should be the colour of the column border. Set this as the background of the div containing both the left and right columns, and have it repeat vertically.
As a back up you can also think about doubling up with the technique previously suggested technique to cover depreciation/broken images.

Sample Code

#leftcolumn{
float: left;
width: 400px;
margin: 0;
padding: 0;
border-right: #ebebeb dashed 1px;
}
#rightcolumn{
margin: 0 0 0 400px;
padding: 0;
border-left: #ebebeb dashed 1px;
}

Coming next… How to remove the border below the selected tab using the sliding doors technique and IE.

This entry was posted on Sunday, February 18th, 2007 at 12:38 am and is filed under development. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.