A List Apart author Alan Pearce recently shared his development work to solve one of the most common problems in CSS layout. Some of us web standards designers would remember this being called the “holy grail”.
Yes, ladies and gentlemen. Alan has finally found the grail and it uses little to no hacks whatsoever to successfully achieve equal height column bliss.
I highly recommend to read his article; Multi-Column Layouts Climb Out of the Box, and even give it a whirl because practice makes perfect, right?
Alright, so what’s so exciting about this whole CSS hoodlum.
One of the biggest challenges (not trouble) for a CSS designer is to have column of different length stretch equally. When I first tried achieving this around 2000, it required some height property usage that wasn’t supported by all browsers. Then later on, other methods like the faux column and the like emerged.
Well, time to add something new and modern to your CSS bookmarks. This ALA article is going to blow you away and teach how to literally use an “out of the box” technique to get those column heights evenly distributed.
How is this possible? Think CSS borders.
You can close your mouth now. This method is really great because it allows you write less markup to keep your code clean and mean. The experiments Alan shared contained several types of layouts.
- Two Column Fixed Width
- Two Column Elastic Layout (Try enlarging the size of your text.)
- Three Column Fixed Width
- Two Column Liquid Layout (Try resizing your browser.)
- and even...Three Column Liquid Layout
Is there a catch? Well, you definitely don’t have to pay a penny for this knowledge but this CSS border method only works if you have fixed width sidebars. Find out the reason for this in Alan’s article; Multi-Column Layouts Climb Out of the Box.
So anyone redesigning their weblog anytime soon?
[tags]A List Apart, CSS design, CSS layout, Alan Pearce[/tags]