Auto height in content div not correct in Firefox

I imagine this is something simple but I am stumped

http://www.evocreative.com/easternbabes/detail.html

The main content div is set to auto height. My understanding of this is that the div should then expand with the nested content. It is working correctly in IE (that's a first!) but not in Firefox.

Please help!

#wrapper {
	font-family: Arial, Helvetica, sans-serif;
	width: 800px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
	height: 300px;
	background-repeat: no-repeat;
	margin-top: 70px;
	background-color: #FFFFFF;
}
#content {
	font-family: Arial, Helvetica, sans-serif;
	width: 800px;
	height: 600px;
	background-image: url(images/home_main_image.jpg);
	background-repeat: no-repeat;
	background-color: #FFFFFF;
}
#top {
	margin: 0px;
	height: 265px;
	width: 100%;
}
#top #header {
	height: 64px;
	border-top-color: #D30D0F;
	border-bottom-color: #D30D0F;
	border-top-style: solid;
	border-bottom-style: solid;
	border-bottom-width: 2px;
	border-top-width: 2px;
	background-image: url(images/logo.jpg);
}
#tagline {
	background-color: #D30D0F;
	float: left;
	height: 36px;
	width: 600px;
	border-top-width: 1px;
	border-top-style: solid;
	border-top-color: #FFFFFF;
	padding-left: 200px;
}
#bottom {
	padding: 0px;
	height: auto;
	width: 100%;
	background-color: #FFFFFF;
}
#bottom #left {
	float: left;
	height: auto;
	width: 183px;
	padding-left: 11px;
}
#bottom #right {
	width: 606px;
	margin-left: 0px;
}
#right #topbabes {
	float: left;
	height: 260px;
	width: 575px;
	padding-top: 11px;
	padding-left: 25px;
}
.bigbabes {
	float: left;
	height: auto;
	width: auto;
	margin-right: 45px;
}
.bigbabename {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10pt;
	font-weight: bold;
	color: #8A8C8D;
	text-align: center;
	padding-top: 5px;
}
.bigbabesright {

	float: left;
	height: auto;
	width: auto;
	margin-right: 0px;
}
#homethumbs {
	background-color: #F2F2F2;
	float: left;
	height: 235px;
	width: 575px;
	padding-left: 25px;
}
.homethumb img {
	border: 1px solid #CE0C0C;
}
.homethumblast img {
	border: 1px solid #CE0C0C;
}
#homethumbs .homethumb {
	float: left;
	width: 50px;
	margin-right: 33px;
	margin-top: 10px;
}
.thumbtext {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 8pt;
	font-weight: bold;
	color: #666666;
	text-align: center;`
	padding-top: 5px;
	line-height: 9pt;
}
#homethumbs .homethumblast {
	float: left;
	width: 50px;
	margin-top: 10px;
}
#signup {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
	font-weight: bold;
	color: #D30D0F;
	background-color: #E3E3E3;
	height: 160px;
	width: 167px;
	float: left;
	margin-top: -50px;
	margin-left: 10px;
}
#nav {
	position: relative;
	left: 9px;
	top: -67px;
	width: 178px;
	height: 100%;
	float: left;
	
}
body {
	background-image: url(images/logo.gif);
	background-repeat: no-repeat;
	text-align: center;
	background-position: center top;
	background-color: #CCCCCC;
}
#babes {
	width: 560px;
	height: 520px;
	margin-top: 170px;
	float: left;
	margin-left: 10px;
}
#detailtext {
	background-color: #f7f7f7;
	padding: 10px;
	float: right;
	height: auto;
	width: 300px;
	min-height: 217px;
	overflow: visible;
}
#detailphoto {
	float: left;
}


#babes #topbabes {
	height: 249px;
	width: 100%;
	margin-left: 25px;
	margin-bottom: 15px;
}
#footer {
	background-color: #CC0000;
	float: left;
	height: 20px;
	width: 770px;
	padding-top: 5px;
	padding-left: 30px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 8pt;
	color: #FFFFFF;
}
#footer a {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 8pt;
	color: #FFFFFF;
	text-decoration: none;
}
#footer a:hover {
	color: #cccccc;
}
#navigation {
	height: auto;
	width: 85%;
	float: left;
	text-align: left;
	position: relative;
	z-index: 3;
	margin-top: -460px;
	margin-left: 10px;
}
.navlink {
	float: left;
	width: 90%;
	padding-bottom: 15px;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #FFFFFF;
	padding-top: 15px;
	margin-left: 15px;
}
.navlinklast {
	float: left;
	width: 90%;
	padding-bottom: 15px;
	padding-top: 15px;
	margin-left: 15px;
}
.signupform {
	padding: 10px;
	width: 100px;
	text-align: left;
}
.signupform input {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 9pt;
	border: 1px solid #D30D0F;
}
.signuplabel {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 8pt;
	font-weight: bold;
	color: #D30D0F;
	text-align: left;
}
#left {
	float: left;
	height: auto;
	width: 178px;
}
.thumbtext a {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 8pt;
	color: #666666;
	text-decoration: none;
	text-align: center;
}
.thumbtext a:hover {
	color: #D30D0F;

}
.homethumblink a {
border: 1px solid #000000;
}
.bigbabename a {
	text-decoration: none;
	color: #8A8C8D;
}
.bigbabename a:hover {
	text-decoration: none;
	color: #D30D0F;
}
#insidethumbs {
	float: left;
	height: 235px;
	width: 540px;
	padding-left: 25px;
}
#insidethumbs .insidethumb {
	float: left;
	width: 76px;
	margin-right: 37px;
	margin-top: 10px;
}
#insidethumbs .insidethumblast {
	float: left;
	width: 76px;
	margin-top: 10px;
}
.insidethumb img {
	border: 1px solid #CE0C0C;
	margin-bottom: 5px;
}
.insidethumblast img {
	border: 1px solid #CE0C0C;
	margin-bottom: 5px;
}
#babescroll {

	width: 600px;
	height: 500px;
	margin-top: 157px;
	float: left;
	padding-left: 5px;
	overflow: auto;
	padding-bottom: 10px;
}
#detailtop {
	background-color: #D30D0F;
	float: left;
	width: 100%;
	height: 24px;
	text-align: left;
}
#detail {

	width: 565px;
	height: auto;
	margin-top: 170px;
	float: left;
	margin-left: 10px;
}
#detailtext .myself {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 8pt;
	line-height: 13pt;
	color: #666666;
	float: left;
	height: auto;
	width: 93%;
	text-align: justify;
	margin-top: 5px;
	margin-left: 10px;
}
.detailhdr {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11pt;
	font-weight: bold;
	color: #D30D0F;
}
#stats {
	background-color: #ECECEC;
	float: right;
	width: 300px;
	height: auto;
	padding-top: 10px;
	padding-left: 20px;
	padding-bottom: 10px;
	overflow: visible;
	margin-bottom: 10px;
}
#stats #statsleft {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 8pt;
	float: right;
	width: 50%;
	text-align: left;
	color: #666666;
}
#stats #statsright {

	font-family: Arial, Helvetica, sans-serif;
	font-size: 9pt;
	line-height: 12pt;
	float: left;
	width: 50%;
}
.statshdr {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 8pt;
	font-weight: bold;
	color: #D30D0F;
	line-height: 16pt;
}
.statshdr2line {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 8pt;
	font-weight: bold;
	color: #D30D0F;
	line-height: 9pt;
}
.stats2line {
	line-height: 9pt;
}
#content2 {

	font-family: Arial, Helvetica, sans-serif;
	width: 800px;
	height: 600px;
	background-image: url(images/home_main_image.jpg);
	background-repeat: no-repeat;
	background-color: #FFFFFF;
	padding-bottom: 50px;
}
#detailsflashleft {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-weight: bold;
	font-style: italic;
	color: #FFFFFF;
	margin-left: 10px;
	font-size: 10pt;
	margin-top: 3px;
	float: left;

}
#detailsflashright {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-weight: bold;
	font-style: italic;
	color: #FFFFFF;
	font-size: 9pt;
	margin-top: 3px;
	float: right;
	margin-right: 10px;

}

Code (markup):

 

IE is acting incorrectly. A container should not enclose its float descendants unless certain requirements are met. The float element is out of the flow and is invisible to other block elements. Google "css float tutorials" to get the basics. The floatutorial link is great. Further, study my enclosing float elements demo.

cheers,

gary

 

Try using the 'overflow:hidden;' property inside the div that you're having problems with

I was having the same prob but I found that overflow:hidden; auto adjusts the div's height without even having to specify any other height for that div.

It works in ie6, ie7 and FF

Thanks to e-fun for the solution

 

As Gary said, this is an IE bug. Firefox is performing correctly.

 

My previous host is no more, so my link above is dead. You may now find it here, enclosing float elements.

Sorry about the inconvenience.

cheers,

gary

 

Interesting hack. It worked for my problem, too.

But in the end I set the float in the parent container and that also fixed the problem and probably a better way to go.

 

I try using for your solution overflow:hidden, and I get an expected result.
Thanks guy a lot

 

You may find that you have fewer problems if you use inline-block where you can instead of float. That way the element is contained but behaves in much the same way as a float. It does not solve all such problems, but anytime you can avoid using clearfix workarounds it is a step ahead.

 

You've got a LOT of code that just doesn't make any sense -- like having the heading (h1) under which EVERYTHING on the page is a subsection in an ASIDE (not that ANY of the HTML 5 "structural" tags make the least bit of sense), multiple same-level H1 without the rubbish HTML 5 tags separating them, The ONE thing that should be a H1 on the page as a DIV + IMG tags (said images being presentational having no business in the markup anyways), sets of anchors as run-on sentences lacking proper block level or character level separators, gibberish forms, endless pointless DIV, classes and ID's for nothing, NAV inside a NAV (pretty much ignoring what NAV means, NOT that there's any legitimate reason to use NAV if you were using headings properly), H1+H2 paired despite the latter not actually starting a new subsection of the page (reeking of the HGROUP style presentational markup nonsense that pretty much ignores what numbered headings MEAN), ARTICLE tags (more HTML 5-tardery) wrapping single non-content elements (IMG tags) for NOTHING, incomplete/inaccessible forms (Placeholder is NOT a label!) static style in the markup...

STYLING that is the least of your worries... of course it looks like Turdpress, so said laundry list of "how not to write HTML" is pretty much to be expected; particularly once HTML 5-tardery is slathered all over it any-old-way with utter and complete ignorance of what any of those tags actually mean/are for.

The handful of CSS you've shown is equally flawed -- fixed pixel widths, fixed pixel heights, re-declaring the font-family endlessly for no reason (just set it on body and forget it!), pt font sizes and line-heights in fixed metric widths (which will cause sizing bugs in browsers that obey pt, AND pt is for print not screen - admittedly I was a hard sell on that a decade ago since mozilla browsers only obeyed pt based off the OS setting and you had to set em's default manually), changing font-size without re-adjusting the line-height, lack of condensed properties being little more than code bloat...

The CSS is just as chock full of "How not to build a website" as the HTML is.