css columns with borders
There are things css guys don't like. Equal height columns and rounded corners are two industry favorites. Especially when the design combines rounded corners together with borders. But bordered columns ... that one was fairly new to me. And guess what, they are pretty much the worst of all. After a few hours of fiddling I found a technique that works pretty well, so why not share it with the rest of you.
what are we trying to do?
Take a good look at the picture above. What you see are two separate columns, both columns have a border and both columns need to size equally. This is of course an easy exercise when you have a predictable amount of content, then you just need to set a min-height. But no such luck here, we have no idea how much content will be in either of the columns.
As for the css column layout technique, I won't explain it in full detail here as the SocialGeek blog already did a way better job than I could manage in the confines of this article. The little trick I will show you is a lot simpler but still pretty nifty.
what is holding us back?
Most column techniques are based on images to fake the column effect in (more than) one wrapper. This technique is nice but horrible when you have to start faking those borders here. You could make it a little easier on yourself if you start slicing 2000x2000px images but I usually stay clear of those. I know they don't take up much extra disk space but I just hate working with them, plus they are never truly fool proof.
Using real borders would be nice indeed, but we can't since the columns are actually fake and never stretch the entire height. If we use a border on the outer wrapper this would get us a long way but the fake-column images would be nested inside the wrapper and would never overlap the border. Unless ...
opening the css trick box
<div class="grid"> <div class="wrap1"> <div class="col1">...</div> <div class="col2">...</div> </div> </div> To create a layout like in the image we will use the html described above. Now, the border on the outer wrapper was a good place to start so we just place it on the div.grid. To get the images to overlap the border we simple apply a negative margin the size of the border-width on the div.wrap1. This way the div.wrap1 spans the exact same area as the div.grid and any images applied will completely cover the area, including the borders of the div.grid. Ain't that nice.
All that is left now is to cut one image containing the right border of the first column, the whitespace (which will be the same width at all time) and the left border of the right column. We can set this image on the div.wrap1 and repeat it vertically. And that's about all there is to it really.
give me the css
/* general styles */ grid {border:1px solid #d9d9bf;} grid .wrap1 {margin:-1px;} This is all you need to create the effect of two bordered columns. This same technique can be used to create multicolumn layouts and even visual components with rounded corners combined with borders. Simply set the border on the outer wrapper, reposition the inner wrapper with a negative margin to cover the borders and start applying the corners. Of course IE is not a big fan of negative margins and needs some correcting.
/* IE7 and below styles */ .grid {zoom:1;} /* IE6 and below styles */ .grid .wrap1 {position:relative;} Now all that needs to be done is to add the column css and you have a working example. The only limitation here is that the border color of all columns needs to be the same. If not, this technique requires one extra wrapper.
conclusion
If you are like me and you hate these huge images that are never fool proof, this technique might be for you. It does require an extra wrapper in some cases, but it is clean and never fails. Layout assured and the html is not even all that bad.