3 column CSS layout equal height solved
Recently the CSS hackers at Position is Everything posted an indepth article “In search of the one true layout“. After a couple of reads, it seems that this is the future way of making 3-column page layout. In fact, it can be used for any number of columns.
Eric Meyer thinks this is so good and that “There’s a new [CSS] sherif in town“.
The idea is to float the columns next to each other directly. Usually this gives you columns of different heights. But here’s the brilliant idea: Apply a large padding-bottom and an equal large negative margin-bottom. That’s is it! Of course, there are still a few browser quirks to deal with (but they are few compared to previous methods I’ve been using).
So, it’s time for me to forget the previous layout techniques I’ve been using: Forget all about faux columns, redmelon negative margin layout, Eric Costello’s The holy grail, and Doug Bowman’s liquid bleach. Even time to forget the ugly voice-family hack, I hope I’ll never use it again.
What’s that to do with usability? Well, less CSS hacking gives me more time for usability work! OK, ’nuff said. I think I read the article once more!
Technorati tags: css
