css columns with borders/a quick css trick
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.
That looks like tabular data to me. Save your sanity, time and money - use a table!
How clever! Thanks for the tip.
I really don't like using
/* IE7 and below styles / .grid { zoom: 1; } / IE6 and below styles */ .grid .wrap1 { position: relative; }
but I must admit it's less evil than 2000px images.
The example given is most certainly not tabular data, and most applicable scenarios would not revolve around tabular data. It's a solution to a presentational/layout problem.
Using images ad part of your design has never been a huge hit for me. Look at this site for example. Perfection. :3
And how do you figure all these rounded corners were conceived huh ;)
Thank you for this. While I didn't need the tutorial exactly, you provided me with a solution to my problem of getting a container div to resize based on the content of nested divs.
My clearfix code was old and not working as it should so I just grabbed the version you were using and voila, all is good in the world. Container divs now are resizing based on nested div content.
My house is made out of wood. Wood is dead cellular matter from trees. Wood was never meant to be used for human housing. Wood was meant to support the tree as an organism. Wood was meant to give a tree strength and help it compete with other organisms for sun, soil, nutrients and water.
Therefore, I guess I should destroy my house because it was built with wood and wood was not meant to build houses.
Lets stop recycling aluminum cans as well. Aluminum cans were meant to contain beverages. We should not reuse them for other purposes. They were only meant to be beverage containers.
Same goes for leather (that's animal skin). Sex (only for reproducing. It wasn't meant to be enjoyed for pleasure.) Even oil (long decayed plant and animal matter... it was never meant to be used as fuel)
I hope you can see where I'm going with this. I don't know what's worse: table within table within table within table OR all the ridiculous 'naked emperor' hacks and bloat code needed to make even the most simple css code... (vertical centering anyone? anyone? please?) just so we can say, "Look, Ma! No tables"
Why not take the best of both worlds. Admit it, CSS doesn't give good grid. Unfortunately, most of the human world uses grids for everything from architectures, to databases, to most printed media, to rows of crops, tiled bathrooms, streets in our cities... grids are all around us.
Go ahead use a table or two!
We won't tell. I promise. As a matter of fact I saw this obscure little seldom visited website called www.NYTIMES.com. They were using tables for 3 column layout. (if they can do it with their 1-2 visitors a month, heck, I guess I can too.)
I'm going to use tables and CSS-layout together, but don't tell anybody. We wouldn't want the Cu-Clux-San to burn a div on my front lawn.
Good luck and happy coding!!
I do, but changing human-made semantics is different from the things you are describing.
You wouldn't change the meaning from "yes" to "no" simply because no is shorter, is used more often and is thus easier ... not all human-invented semantics are ideal but for the bigger part we are stuck with them and changing/abusing them does lead to unneeded confusion.
That said, one thing most table-advocates are often failing to mention that styling tables cross-browser isn't exactly a walk in the park either, especially when the content inside isn't predictable. I still remember the days of table-hacks but have long forgotten about most. Which shows whenever I do need to style a table. I find it one of the hardest things to do properly, even though the standard behavior is often closer to what I need to design.
Apart from that, good writing skills, but you haven't really convinced me I'm afraid :)
Your working example includes the use of images to achieve the effect. Where is the CSS and markup used to generate the screenshot at the beginning of this article?
I missed the part in the article where you state you have to resort to an image, it's just a lot smaller than the other hacks out there.
So I decided to take a quick stab at it myself without using any images. Here is my solution.
Compatible with IE 5 and up. In theory it should work with multiple columns, you just need to add some extra markup and CSS. You could probably work in separate background colors without using images, although there's a lot more markup and CSS in store if you want to do that.
Interesting solution and good addition to the article, though I usually don't like to put empty elements in my html just for styling purposes.
* required fields