|
|
Posted by Nik Coughlin on 01/22/08 18:14
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
Navigation:
[Reply to this message]
|