This looks promising.

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.


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.


0 thoughts on “Hmm

  1. Sb–

    Dave again; broken link alert! Your “this looks promising” link doesn’t work for me.

    Douglas Livingstone’s layout does look nice. It renders well in Konqueror too, except if you resize the browser (make it smaller, then bigger again), you end up with a bunch of whitespace under the content. It doesn’t break anything, but you end up with a vertical scrollbar that, when scrolled, leads to lots of nothing!

    I don’t know a whole lot of CSS, so sorry I can’t offer much constructive advice. Consider me to be part of the ‘moral support’ section!

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s