Posted by adwatson on 01/22/08 19:24

That seems like a pretty clean solution to something that always
seemed to require way more "hacking" around in css than it should. In
the past I've just given up and used a table for it, rather than screw
around with some of the over-complicated css versions I've seen
floating around.

------
-- Aric Watson - http://www.maxvps.com - Virtual Private Server
hosting
------


On Jan 22, 1:16 pm, "Nik Coughlin" <nrkn....@gmail.com> wrote:
> 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]