CSS3 and the Future of Equal Height Columns
While my mind was wandering today I somehow got stuck thinking about CSS3, I am not sure why I bother since I heard Eric Meyer tell An Event Apart Seattle that it isn’t exactly around the corner, but as often happens my curiosity got the best of me. When I should have been going to bed I ended up on the W3C site looking through draft CSS3 specifications. CSS3 apparently won’t be one specification, but is currently made up of many modules, all being worked on by different people. The one which really caught my interest was the CSS Advanced Layout Module.
Like many people who learned to create websites when tables were still the main tool to layout a page, one of the only things I miss about those days was the ease with which I could create equal height sections of content on a page. There just isn’t a simple way to make two elements remain the same height as the content in each changes. I have mainly used two methods in the past:
- A CSS Method from positioniseverything.net (there are problems with this method that they discuss at the link)
- or, Project Seven’s Javascript method
They have served their purpose well enough, but they are not exactly elegant, and I can’t wait for a better solution. The one I found in the Advanced Layout Module would really open up a lot of options. To get a detailed description you should head over to the link above now, but briefly, if this spec is implented, it would work as follows:
- Using the display property on the parent element you would describe the layout you are creating
- using the position property on the child elements you would assign where they should appear in the layout
That explanation doesn’t really do it justice, let me give an example. Lets say you want three boxes at the bottom of a homepage that highlight the latest content from 3 sections of the site, and they all need to be the same height so your page does not look uneven.
XHTML-
<div id="highlights">
<div id="highlight1">Blah…</div>
<div id="highlight2">Blah…</div>
<div id="highlight3">Blah…</div>
</div>css -
#highlights {display: "abc";)
#hightlight1 {position: a;}
#hightlight2 {position: b;}
#hightlight3 {position: c;}The spec calls the method "Template-based positioning" and says it borrows concepts from table based layout, including that rows and columns constrain each others size. More complicated layouts including more than one row are also discussed. It is really quite brilliant, I just hope it happens some day.
