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>
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>