container <div> dosen't expand with content

A css novice here. Thanks for the help.

have a container div that i want to be a minimum height but expand if there is more content. works fine in i.e. but not expanding in foxfire.

the real url is www.freeghana.com/scammit.php
but i stripped out the header and footer at www.freeghana.com/junky.php for clearity.

the relevant css is for the div i want to have expanding height is

#container {
	margin: 0px 0px 0px 0px;
	padding: 0px;
	border: 0px;
	background: #FFF;
	overflow: visible;
	width: 889px;
	height: 510px; /* ie5win fudge begins */
	voice-family: "\"}\"";
	voice-family:inherit;
	height: 480px;
	width: 859px;
	}
html>body #container {
	height: 480px; /* ie5win fudge ends */
	width: 859px;
	}

Code (css):

and basically i take the container div:

<div id="container">

--and over stuff it with things like this--

<p><img src="images/spacer.gif" width=100 height=10></p>

<div id="secondary_title"><a name="REPORT"></a>Report a Scam</div>
<div id="secondary_content">Please forward all scams and fraudulent e-mails to <a href="mailto:info@freeghana.com">info@freeghana.com</a> for investigation.</div>

--and then close it--
</div>

Code (div):

Thanks

 

I had the problem with FireFox when I first started using full CSS Layouts. What you should do is remove height: 510px; from #container. If you want to have additional spaces outside you should use paddings. This way the DIV will expand according to the content in both firefox and IE.

 

may be removing the height property will sove your problem

 

You need to place a clearing tag as the last thing inside the div.

<div id="container">
  <p><img src="images/spacer.gif" width=100 height=10></p>
  <div id="secondary_title"><a name="REPORT"></a>Report a Scam</div>
  <div id="secondary_content">Please forward all scams and fraudulent e-mails to <a href="mailto:info@freeghana.com">info@freeghana.com</a> for investigation.</div>

  [B]<br style="clear:both" />[/B]
</div>

Code (div):

This will force the div to expand with the content.

 

I have the same problem with a site I am developing. I tried the above "force clearing" but I don't think I'm adding it in the right place because I can't get it to work.

My CSS:

/* container----------------------------------- */
#container {
width: 900px;
min-height: 700px;
overflow:inherit;
padding: 0;
margin: 40px auto;
background-color: #ffffff;
margin-top: 0;
}
a:link {
color: #095c9c;
text-decoration: none;
font-weight: bold;
}
a:hover, a:focus, a:active {
color: #095c9c;
text-decoration: underline;
font-weight: bold;
}
a:visited {
text-decoration: none;
text-weight: normal;
color: #095c9c;
}
ul {
line-height: 18px;
margin: 0;
padding: 0;
}




h1, h2, h4 {
font-family: 'EngraversGothicFSRegular',Arial, Helvetica, sans-serif;
margin-top: 0;
margin-bottom: 5px;
}


h1 + p, h2 + p {
margin-top: 0;
}
h1{
font-size: 16px;
font-weight: bold;
color: #095c9c;
}
h2{
font-size: 16px;
font-weight: bold;
color: #095c9c;
}
h3{
font-size: 12px;
font-weight: bold;
color: #095c9c;
text-align: center;
}
p {
font-weight: normal;
color: #095c9c;
}
.journal {
font-size: 10px;
padding-bottom: 10px;
font-weight: normal;
padding-left: 10px;
text-align:right;
}
.aside {
font-size: 9px;
font-style: italic;
font-weight: normal;
padding-left: 10px;
text-align:left;
}
.aside2 {
font-size: 9px;
font-style: italic;
font-weight: normal;
padding-left: 10px;
text-align:center;
}

My PHP:
<div id="container">
<div id="columnone">
<div class="topbox">
<img src="<?php bloginfo('template_url'); ?>/images/generations.jpg" width="300" height="300" alt="Retired Couple Hugging." />


</div>
<div class="bottombox">
<div class="copy_left">
<?php iinclude_page(88); ?>


</div>
</div>
</div>


<div id="columntwo">
<div class="topbox">
<div class="copy_right">
<?php iinclude_page(86); ?>


</div>
</div>
<div class="bottombox">
<div class="copy_right">
<?php iinclude_page(91); ?>


</div>

</div>

<div id="childLifeInfo" title="Specialty Plans for Children & Seniors">
<?php iinclude_page(119); ?>
</div>

<div id="adultTermInfo" title="Term Insurance">
<?php iinclude_page(122); ?>
</div>
<div id="adultPermInfo" title="Permanent Insurance">
<?php iinclude_page(127); ?>

</div>
</div>






<div id="cross"><img src="<?php bloginfo('template_url'); ?>/images/cross.png" width="188" height="190" alt="K.J.Z.T. Cross" /></div>


<?php get_sidebar();?>


<?php get_footer();?>

Any tips?

 

Try adding max-height: 100%;

If it doesn't work, paste the whole CSS and the whole HTML code (not bits of it in PHP) so we can see the whole thing.

 

Attaway DP posters!! Start bringing up 7-year old threads so we can all enjoy them. Give me more proof, and prove it to the world, what a wonderful group of people you are!!

I love living in the distant past.

 

AustiniteProgrammer started it.... :/ I thought I wrote him to open a new thread, but I didn't...