Posted by Jeff on 01/22/08 20:20

Nik Coughlin wrote:

Hello Nik,

Thanks for the explanation, I'm feeling off today but will go through
a test layout later to verify that I understand. It's the first time
I've understood this! And it looks like you have some converts, although
I'm unsure if Jonathan is in the pro or anti group!

Jeff

> 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]