division with initial height and bottom nested div

Mozilla interprets height position differently

[oona]

I have a division which will contain dynamic content.
it has an initial height 0f 240 px and stretches to accomodate its content.
nested at the bottom of this division is another div which should remain at the bottom of its containing div no matter how long, (or short!) the content.
If there is no content, the division should also maintain it's height of 240px.
The problem(s)?
If I give the container div a heightof 240px(a minimum height) and the nested div a position:bottom, this works fine in explorer, but not in Mozilla.
Mozilla will leave the nested division at its initial bottom position when the content exceeds 240px and lets the content flow behind it.
Without an initial height for the container, ie. with a value of 100%,or with pos:relative, it will allow the bottom div to be pushed down but with a content of less than 240px, the bottom div moves up to the top.
Has anyone got a solution for this problem?
I would be extremely grateful as it's really aggravating..

Here a brief version of the code:

html

<div id="container">

<div class="content">
dynamic content
<br />
dynamic content
<br />

dynamic content
<br />

dynamic content
<br />
dynamic content
<br />

dynamic content
<br />
</div>

<div id="bottomline">

</div>
</div>

css

#container{position:absolute;top:0px;left:0px;padding:0px 0em 0px 0px;margin-left:0px; margin-top:0px; border:0px ; width:350px; height:240px;}

#bottomline{position:absolute;bottom:0px;left:0px;padding:0px 0em 0px 0px;margin-left:0px; margin-top:0px; border:0px ; width:350px;height:19px;}

.content{has font classes etc.}

[choster]

Welcome to WebmasterWorld, oona.

I noticed that you have position:bottom which I believe is an IE-only extension and not valid W3C CSS. Well, I got this code to work using a different kluge, the ever-dreaded spacing div with a margin on .content to push #bottomline out of the way.

The borders are just to show where the boxes are drawn, and you'll also need to account for IE's incorrect calculation of widths and heights, but I think this is what you're looking for:

<style type="text/css">
#container, #bottomline {position:absolute; left:0; padding:0; margin:0; width:350px}
#container {top:0; border: 1px solid #c00;}
#bottomline {bottom:0; border: 1px solid #009;height:19px;} 
#spacer {height:240px; float:right;}
.content {font-size: 1em; margin-bottom:1.5em}
</style>
<div id="container">
 <div id="spacer"><br /></div>
 <div class="content">
 dynamic content<br />
 dynamic content<br />
 </div>
 <div id="bottomline"></div>
</div>

[oona]

That looks like a good solution.
I'm in a bit of a rush right now, but I'll try it out first thing tomorrow!
Thanks a lot!

[oona]

Dear Choster,

I've been on a computer-free holiday(strange but true),so it's taken me a while to come back to this topic.

I haven't managed to solve my problem with the spacer div in your example.
As the site-layout is complicated, with a lot of nested divs with relative and absolute positions, the problem probably lies in the relationship between these nested divs to each other.
Everything else works, so I'm not really willing to change them.

One interesting result cropped up whilst removing comments from a division:

<div id="container">

<div id="top-bar">
</div>

<div id="content">

<div class="subdivision">
dynamic content
</div>

<div class="subdivision">
dynamic content
</div>

<div class="subdivision">
dynamic content
</div-->

</div>
I removed the!-- starting the comment, but neglected to remove the -- in the closing tag.

As the closing tag was then no longer recognised as such, the next one was taken to close the subdivision, and so the content division with the height property in it's CSS had no closing tag.
Mozilla then oddly enough accept's the height as a minimum-height, and explorer as usual generously overlooks the tag mistake and so retains the absolute height property it needs!

I don't really want to go with this, but it does seem to work!

I've decided to solve the problem with a type of spacer div with a height property which is thrown out when the php-generated content length exceeds that height.
Probably the safest solution.

Thanks again for your help,
Oona

[oona]

Sorry, forgot to close the container div in the example code above...</div>

[SuzyUK]

oona... sorry missed this first time around.

>>position: absolute; bottom is a correct setting

top¦bottom¦left¦right are all legitimate position properties

Your problem is easily sorted with min-height whcich unfortuantely isn't supported in IE.. but as you've discovered IE already renders the code how you want anyway as it stretches the div greater than the specified height if required.

So it can be done by feeding IE a height value and everyone else a min-height value

CSS:

#container{
position:absolute;
top:0px;
left:0px;
padding:0;
margin:0;
border:0px ;
width:350px;
min-height:240px;
}

* html #container {height: 240px;}

#bottomline{
position:absolute;
bottom:0px;
left:0px;
padding:0;
margin:0;
border:0;
width:350px;
height:19px;
background: red; /* added for testing */
}

The * html is a workaround/hack that will feed a value to IE only

Suzy

[oona]

...thats an extremely handy workaround!
Thanks