Full length background colors in three columns

Borders on ludicrously simple

[photon]

I just saw this today in a mailing list I'm on, which in turn netted it from redmelon. They suggested using left and right borders on the center column that were the width of the left and right columns. Then the left and right columns would have negative margins to sit on top on those borders. Of course, the center column would have to be the longest.

Is this new to anyone besides me? Has anyone tried it in multiple browsers?

[killroy]

I usually use margins instead of borders, especially for placing headers nad footers.

SN

[photon]

How do you color the margins?

[Hester]

Aaaaaagh! I just came up with this trick myself and thought it was original!

What I did was realise you could use borders to create coloured sides (left and right) to a main div. The beauty is that they are the same height! So your main content goes in the middle div (the longest) and the side ones can be any length.

I'm not using negative margins but absolutely positioned divs to overlay the borders.

To colour the divs, why you just colour the borders of course!

The only problems are that you can't have a border round the left, middle or right columns, since they are the borders!

[SuzyUK]

I also tried this a while back..

I too used the absolute positioning method to "overlay" the left/right columns

You can get borders on either side of the "middle" by nesting another div inside it and giving it the decorative borders..

but the main problem I see with it as already mentioned is that center "content" section has to be the longest..

negative margins...hmm maybe, but I forsee it needing specific width dimensions then some use of IE hacks..

possibly a simple way to do a Two column layout though using floats...

Suzy

[Hester]

I found I needed no hacks - Mozilla 1.4, IE6/Win and Opera 7.11 all showed it just right.

but the main problem I see with it as already mentioned is that center "content" section has to be the longest.

To me, this is the main benefit of it! Before, I couldn't get the right column the same length as the centre. Designers have found many tricks to get a 3-column layout where all 3 columns are of equal length. I find this border trick a great idea!