Click to See Complete Forum and Search --> : container height issue


johnnyblotter
12-16-2007, 12:59 PM
Hi all,

For some reason I can't seem to figure out why my main content div will not push down the bottom border of my container div in firefox. The structure of the page is a basic two-column layout, with the main column floated left and the right sidebar running to the right. Take a look at www.jontakiff.com/portfolio in firefox, you'll see what I'm getting at. In IE6 the main content pushes down the bottom border as I expect it to...any idea what I'm missing?

here's the css...thanks!

body{
margin:0;
padding:0;
text-align:center;
background-color:silver;
}

#head {
height:165px;
background:url(images/greenhead3.gif) no-repeat;
border:0px solid black;margin:0;background-color:white;}

#container {
font-family:verdana;
width:740px;
text-align:left;
margin:0px auto;
font-size:12px;
background-color:white;
border:1px solid black;
}

#navlist {
margin:0;padding:0;
position:relative;left:150px;bottom:20px;
border-bottom:1px solid #7bb977;
width:570px;}

#navlist li{
display:inline;
list-style-type:none;
}

#navlist li a {
text-decoration:none;
padding:3px;
margin-right:5px;
}

#content {
position:relative;bottom:15px;
float:left;width:460px;border:0px solid black;padding-top:20px;font-size:14px;margin:0;
padding-bottom:0px;padding-right:0;background-color:white;padding-left:25px;}

#content h2{margin:0;padding:0;font-size:14px;}

#rightnav{margin-right:20px;margin-left:500px;
background-color:#ebebeb;padding-top:20px;position:relative;bottom:15px;
text-align:center;}

#friends{text-align:center;margin:0;}

#clients {clear:both;}

#work{border:0px solid black;padding-bottom:35px;margin-top:10px;}

.workprojects{border:0px solid black;padding-bottom:35px;margin-top:10px;}

.imageleft {clear:both;float:left;width:195px;margin:0;padding:2px;border:1px solid silver;
}
.imageleft img{border:1px solid silver;margin:0;padding:0;display:block;}

.description{margin:0px 0 0 215px;border:0px solid black;padding:8px 0 0 0;}

</body>
</html>

WebJoel
12-16-2007, 03:18 PM
<div id="container" style="overflow:hidden;">

drhowarddrfine
12-16-2007, 04:58 PM
IE, as always, is performing incorrectly. This is a bug inn IE. Elements are NOT to expand to contain floated elements. WebJoel's solutions is what to do.