Topic: absolute & relative positioning with children who stretch

I have a <div> that contains the entire page. It's positioned absolutely for centering reasons. Inside this, I need to include at least two more that stretch (in height) based on content. The first is a nav div on the left, and the second is the main content area. I put a relatively positioned div inside the main one so that I can absolutely position others based on it. But the main (parent) div doesn't grow as the children do, since it's absolute (although no height is specified). I hope this makes sense.

So, I need to make the parent div stretch to accomodate the others. I've tried Googling a little, but I'm not sure I'm searching for the right thing.

is a crude rendering of what I'm after. I was thinking of doing the usual Holy Grail type column layout, but I need the nav to position to the top of the main div, not under the header.

Help!

...and you want this to work in IE? If so, http://pmob.co.uk/ probably has what you want.

It's all simple until you add a footer. While semantically incorrect, it wouldn't actually hurt usability for non-visual browsers to use a one-column table.

(Edited by reisio on 05-03-2005 00:59)

Yep - the footer is what's killing me. I toyed with using a table (and still might), but am trying to avoid it if possible.

I'll check out the links. Thanks for the info.

The real trick is doing it without any hacks.

I'm sure there's a way, but it'd probably take a ridiculous amount of time to stumble upon it, and then you'd have a footer...whoopee.

Yeah, I don't have a lot of billable time to mess with it. I think I'm going to use the two column method on that link (the one with the footer), and then just position another div with the navigation in it. That should get the same effect, but be less headache.