container div stretch

container div stretch to include contents

[ucbones]

Hi,

I've got roughly the following markup

<div id="container">
<div id="header">fixed height header here</div>
<div id="content">content goes here</div>
<div id="menu">menu info goes here</div>
<div id="footer">copyright info</div>
</div>

I've applied a background to the container div, all divs of fixed widths, in IE it works fine, but in Moz the container div doesn't stretch to include it's contents, as none have fixed height except the header, hence the bg image only goes behind the header.

Any ideas how to make the container div stretch to include all it's content?

Cheers,

ucbones

[Peb0]

The problem seems to be that many browser/platform combinations require actual content before they will go to a certain size. (If I remember correctly, Netscape on Mac will collapse table cells with no content. A non-breaking-space &nbsp; fixes that and then css sizing works properly.)

I almost always have a 1px by 1px transparent gif on every site I make.

If I need something held wide, I just place the image anywhere inconspicious within the required div and hardcode the image dimensions to whatever I need <img src="transparent.gif" height=1px width=200px>

If I need something held tall, I place it in a floating div and likewise hard code the size <img src="transparent.gif" height=200px width=1px>