mrab54 Posted January 27, 2010 Share Posted January 27, 2010 I having problems with getting a background color of a div to appear unless I set the min-height property. What I have below is a wrapper div, inside that another "wrapper" div of sorts that contains two floated div's. I would expect the background of the inside wrapper div to fill in as the two other div's grow but it doesn't.If I set the min-height property on the inside wrapper, then the background gets filled in. Is there any other way to accomplish this? <!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><style type="text/css">body { margin: 0; padding: 0; text-align:center;}#wrapper { text-align:left; width: 900px; margin: 0 auto 0 auto;}#banner { background:#063; height:110px;}#main { background:#30F; /*min-height:200px;*/}#left_col { background:#9F6; width:450px; margin: 0 0 0 10px; float:left;}#right_col { background:#6C6; width:400px; float:right;} #footer { background:#909; height:40px; clear:both;}</style><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Untitled Document</title></head><body><div id="wrapper"> <div id="banner"></div> <div id="main"> <div id="left_col"> <p>yadda yadda yadda...</p> <p>yadda yadda yadda...</p> <p>yadda yadda yadda...</p> <p>yadda yadda yadda...</p> </div> <div id="right_col"> <p>yadda yadda yadda...</p> </div> </div> <div id="footer">Footer</div></div></body></html> Thanks in advance. Link to comment Share on other sites More sharing options...
jeffman Posted January 27, 2010 Share Posted January 27, 2010 Floated content does not cause containers to expand in the normal way. No one's ever explained an advantage of this to me, so I don't know why it is. One solution often used is to add an empty element at the bottom set to clear:both . Not very satisfying. The following also works. I wish I could tell you why. #main { background:#30F; overflow:auto;} Link to comment Share on other sites More sharing options...
ShadowMage Posted January 27, 2010 Share Posted January 27, 2010 I personally prefer the overflow: auto method just because it doesn't clutter the page nearly as much.And you're right, it doesn't make a whole lot of sense does it? Link to comment Share on other sites More sharing options...
needesigns Posted January 27, 2010 Share Posted January 27, 2010 Yes, he is correct continue with this Link to comment Share on other sites More sharing options...
Ingolme Posted January 27, 2010 Share Posted January 27, 2010 As I see it, the overflow property forces the box to become independent from the page flow so that it will be able to handle the content within it.That means that the margins within it will not be put outside of it, and the floated elements will need to be inside it so that people can scroll if they exceed the specified height of the box.As far as I know, the overflow: auto; method might not work for older versions of Opera an Internet Explorer unless the box has a specific width set. Link to comment Share on other sites More sharing options...
mrab54 Posted January 28, 2010 Author Share Posted January 28, 2010 Great! Thanks a lot for the replies. Just one of the many little quirks I have run into while trying to learn css. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.