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.

Well it is day two. I think things are looking pretty good. Still plenty to do and areas of the blog interface I haven’t even looked at so excuse the mess. I hope it doesn’t turn out to be one of those projects that kicks off well but loses steam.

If you have any comments or suggestions I love to hear them.

Hopefully I might have time later today to do some more. Suposed to be seeing Hot Fuzz too so I’ll give it a review.

Well as you can see I have made some quick progress at styling the blog. I took the default template, downloaded it and started overwriting the elements one by one.

I ran in to a problem quickly which took a while to resolve - the #page div was appearing transparent. It turned out that there was a script in the header.php which was effecting it so I removed it. Hope that doesn’t have an impact somewhere down the line…

Still got plenty to do but at least it is taking shape and is a lot easier than I thought it would be. Wordpress is definitely better than the model I tried using last time.

I think my work time is about to come to an end as it is my daughter’s bath time and I’ve been sat at the computer all evening.

Wow. I can’t believe I’ve finally got of my ass and set a blog. Well I had one a couple of years ago but I never got round to posting anything. Well I’m determined to use this one. There’s loads of shit I want to shout about and get off my chest. For now though I need to look in to how to skin this interface.

B