Posted by Nik Coughlin on 01/22/08 18:16

Nik Coughlin wrote:
> Jeff wrote:
>> Nik Coughlin wrote:
>>>
>>> http://www.nrkn.com/3ColEqualPositioned/
>>>
>>> No Javascript, but as GTalbot pointed out last time I posted this,
>>> IE 7 has some trouble selecting text in the leftmost column
>>> (probably trivial to fix) and he objected to my using empty div
>>> elements for layout purposes and clearing of floats, as well as my
>>> mixing floats and absolute/relative positioning. However, of those
>>> only the IE 7 thing bothers me, and it is otherwise very cross
>>> browser.
>>
>> Well, I like it to. It works very well, but the trouble is that I
>> really don't understand it! If you find the time to explain how to
>> set it up, you'll get some converts. Now, I've seen the explanation,
>> with some extra rules, for a related CSS setup, and I didn't
>> understand that either! I'm afraid that I'm just a simple guy.
>
> columnWrapper holds two divs for each column, one for the content and
> one for the background/border etc. So the div for the left column's
> content is the one with class "left" and the one for it's
> background/border is the one with class "leftBack".
>
> The content columns are a fairly standard floated three column
> layout, and they have an empty div after them that clears the floats.
> This means that the parent div, columnWrapper, will always be the
> height of the tallest column.
>
> columnWrapper has position: relative, which means that any of its
> absolutely positioned children, such as leftBack, rightBack and
> middleBack, will be positioned relative to its boundaries. That way
> we can set each of the background columns to have a top of 0 and a
> bottom of 0, so that they stretch from the top to the bottom of the
> parent container called columnWrapper - equal height columns.
>
> In this instance when you set top: 0 and bottom: 0, you're saying,
> make the top of this element 0 pixels from it's parents' top, and
> make the bottom of this element 0 pixels from it's parent's bottom.
>
> The stuff in the IE conditional comments is because IE 6 doesn't let
> you set two absolute positions on an element that are opposite to
> each other, you can either set a top or a bottom but not both, a left
> or a right but not both. The expression corrects this. I can break
> this down for you too if you like.
>
> Let me know if any of that is still unclear. I've just woken up :P

Oh and normally the absolutely positioned background divs would sit in front
of the content divs, which is why the content divs have position: relative
and z-index: 1, to bring them forward.

[Back to original message]