Div Height Problem - CSS forum at WebmasterWorld - WebmasterWorld

Forum Moderators: not2easy

Message Too Old, No Replies

Div Height Problem

No Height Set, the content overflows without extending the background

Blue_Chi

9:44 am on Sep 6, 2006 (gmt 0)

10+ Year Member

I am using floats to have the content (divs) of the div align vertically, everything is in place, but the background of the parent div does not expand to cover them up.

Here is my code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
div.footer {
width:750px;
clear:both;
padding: 0 0 10px 0;
margin:0px auto 0px auto;
background:url(footer_bg.jpg) center 79px repeat-y #00CCFF;
}
div.footer-header {
width:750px;
height:80px;
background:url(footer_header.jpg) center no-repeat;
padding:0px;
margin:0px;
}
div.recently {
width:250px;
float:left;
height:350px;
text-align:left;
}
div.recommended {
width:270px;
float:left;
height:350px;
}
div.third-c{
width:230px;
float:left;
height:350px;
padding:0;
margin:0;
text-align:left;
background:#00FF00;
}
</style>
</head>

<body>
<div class="footer">
<div class="footer-header"></div>
<div class="recently"></div>
<div class="recommended">
<p><img src="back_to_basics.gif" /></p>
<p><img src="stacie.gif" width="100" height="100" /></p>
<p><img src="css.gif" width="100" height="129" /></p>
</div>
<div class="third-c"></div>
</div>
</body>
</html>

benihana

9:52 am on Sep 6, 2006 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

the floats are bsuting out of their parent elements. IIRC, this is the correct (spec'd) behaviour.

If you float the container, that should force them to contain the cfloated child elements

Setek

10:07 am on Sep 6, 2006 (gmt 0)

10+ Year Member

... and to extend on benihana's response:

If, perchance, floating the parent container breaks your layout, you could use a clearing div instead:

<div style="clear:both;height:1px;overflow:hidden;font-size:0.1em;">&nbsp;</div>

(inline styles for examplified usage)

This forces the parent container to push past the floated children to accommodate for the clearing div (keep in mind, this will take up 1px of space.)

If the 1px of blank space is unwanted for design issues, you could try keeping one of the floated children (the tallest, typically) as in the normal document flow: this way, the parent acknowledges it, and pushes past it automatically.

Just some suggestions :)

P.S.: Yep, you recall correctly, that's exactly how they're meant to render.

[edited by: Setek at 10:08 am (utc) on Sep. 6, 2006]

Ingolemo

1:16 pm on Sep 6, 2006 (gmt 0)

10+ Year Member

Even better would be to use the :after pseudo-class to clear the floats rather than introduce an unsemantic div:

#footer:after {
 content: "."; 
 display: block; 
 height: 0; 
 clear: both; 
 visibility: hidden;
} * html #footer {height: 1%;}

[edited by: Ingolemo at 1:16 pm (utc) on Sep. 6, 2006]

meybaud35mm

3:12 pm on Sep 6, 2006 (gmt 0)

10+ Year Member

or choose 100% for your height and width attributes so its less confusing when modifying these in the future. everything i do has a "parent" class div that sets the max width and everything within it is just set to 100% so it inherits and doesnt "bust out". so after a box model project, with maybe 30+ divs, i usually only have about 5 divs that represent a size value, it makes it really easy.

regards...

Blue_Chi

3:22 pm on Sep 6, 2006 (gmt 0)

10+ Year Member

You guys are the best, thanks so much on your great help! I got it to work now.