Liquid height divisions problem

[Saratoga Sam]

Hi -

I have a simple problem that has been vexing me for weeks; I'm trying to get a container division to have a liquid height.

I have a simple working example of webpage structured with 3 divisions. A fixed-height TOP division (gray), a variable-height MIDDLE division (blue) and a fixed-height BOTTOM division (yellow). For some reason I cannot get the variable-height MIDDLE division to expand with the content it contains.

I have a simple example here: http://www.saratogawebsites.com/test/

Any ideas where I'm going wrong?

Thanks,

Saratoga Sam

[Snookerman]

That is because the divisions that contain the text are absolutely positioned, which means they don't take up any space. You could position them relatively.

Good luck!

[Saratoga Sam]

Ok - thanks, Snookerman.

But how would I get these two divisions of text to align using relative positioning, so that they are displayed at the same position in the y-axis?

[Snookerman]

You can float them using float: left;. You will also have to set the parent container to overflow: hidden; to clear the float.

Good luck!

[Burgin]

Is this the same problem...,

Three columns side-by-side (left, middle & right divs that float:left) all within a containing div #wrapper.
In IE #wrapper height expands with columns but in all other browsers it remains.

[Snookerman]

Burgin, please post a link to your site and in the future, please start your own thread, even if you suspect you have the same issue. Now, you can ask a mod to move it for you.

[Saratoga Sam]

Snookerman, thanks. I will experiment with your suggestion.

I'm not sure I understand why absolute positioned div's do not take up space.

Do you know what the philosophy behind this is?

Thanks!