- Ruthsarian :
- Layouts :
- Labs :
- Blog :
- Contact :
June 04, 2004
Hmm
I started out looking through the piefecta layout on PIE which lead me to this layout by Douglas Livingstone.
That layout has all three columns floated from inside a shared block. That shared block (well, a parent of) has side borders with the same width as the left and right columns. Then use negative margins on the side columns and presto, you force them over the borders of the parent block. Those borders act as background colors for the columns.
This is something I had tried about a year back but missed the one crucial step, which is those side columns need to poke by at least 1 pixel into the main column. This allows for an element, inside the same parent block and with its clear attribute set, to clear below all three columns. This forces the parent block, which is responsible for the background column colors, to carry down regardless of which column is taller.
A little pixel manipulation gets borders between all three columns to line up.
Nice.
What's even more nice is the few number of hacks that will be needed to get it to work. I have only tested under Mozilla and IE6 and will try Opera this weekend. IE5 and Mac testing will take place Monday or Tuesday of next week.
This has some really great potential.
NS4 support is probably not going to happen. But the other columns w/background colors layout I'm working on doesn't support NS4 anyways and I feel comfortable with this.
We'll see how this works out next week.
Post a comment