By way of another article I poked my head around the One True Layout article. I’ve seen a lot more references to this one article over this past weekend so I wanted to give this a second, more thorough read. The equal height bit especially.
The way the equal height trick works is that each column or block is wrapped with a container that has
overflow:hidden; set. Then the block has some incredibly huge value of bottom padding. Negative bottom margins then remove that padding from the flow of the document so that the tallest column doesn’t create a 30,000px tall document. The result is that each column appears to be equal height. In reality the three columns have different heights, but they’re very very tall and are being clipped to give the appearence of being equal height.
This has one immediate advantage that is going to eventually coax me to actually use this hack. It makes adding gutterspace between elements relatively simple. I’ve tried this using the skidoo approach to this in the nausicaa layout but the markup and CSS hackery was just a bit much for me to consider releasing a “production quality” version of the layout.
Relative positioning and negative margins together are becoming the key techniques in the “latest, hot” CSS-based layouts that are out there (the previously mentioned articles being no exception). This approach removes the need for some extra bits of markup that were otherwise utilized to generate source-ordered layouts.
The support across browsing platforms appears to be pretty good too.
Let’s say you’ve got 3 columns and you want the middle column first in your source. You float all 3 columns left. Then add some space to the left of your middle column, either via margins or by shifting the element right X number of units via the
left rule in relative positioning. Then take what is to be your left column and move it over the now open area to the left of the middle column via either negative margins or relative positioning.
It seems to work pretty well.
So I took this method to the minimalist markup ideology and came up with something that might be interesting. It’s quite compatible too. I threw in a couple hacks to get NN4 working with it (yes.. Netscape 4) but IE 5 seems to be pulling the left column just a little too far to the left. Not sure why.
And adding gutterspace inside each column won’t happen unless you introduce extra markup (wrap the content of each column with another DIV and apply padding to that). You could play a bit a trickery and set the side columns to 19% width instead of 20% and compensate all the negative margins and relative positioning values appropriately to get some gutterspace.
This example is only using percent values to specify widths. This is because it’s the only way to get very compatible with the different browsing platforms out there.