tony noriega
Reputation: 7663
CSS / HTML - Footer not positioned right
Cant figure out why my footer is not sitting inside my "container" DIV.
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
</head>
<body>
<div id="container">
<div id="innerContainer">
<div class="leftcol">
</div><!--/leftcol-->
<div class="centercol-home">
</div><!--/centercolHome-->
</div><!--/innercontainer-->
<div class="footer">
</div>
</div><!--/container-->
</body>
</html>
I have a 3px border on "container" but i can see visibly the the footer is sitting on top of container, andnot inside...
here is the CSS:
html {
font-family: Arial, sans-serif;
height:100%;
}
body{
margin: 0 auto;
padding: 0;
font-size: 12px;
height:100%;
/*min-width:995px;*/
background:url(/_images/body-bg.jpg) top center no-repeat;
}
#container {
width:995px;
margin: 0 auto;
padding: 0;
height:100%;
position:relative;
background:#fff;
border:3px solid #0068b3;
}
/* IE6 */
* html #container {
height:100%;
}
#innerContainer {
width:985px;
min-height:100%;
padding:0 5px 5px 5px;
margin:0 0 25px 0;
/*float:left;*/
background:#fff;
}
.footer {
clear:both;
float:left;
width:974px;
text-align: center;
/*bottom:0;*/
padding-top:5px;
padding-bottom:5px;
}
Upvotes: 1
Views: 666
Answers (2)
Ryan Wersal
Reputation: 3228
An alternative is adding float:left; to your #container.
The issue is that the #container isn't floated, and thus is in the normal page "flow". That allows the .footer to "float" above, and outside, the #container. If you float the #container as well, the .footer should appear where you expected.
You may also have to float all your "container" divs, including #container, .footer, and #innerContainer.
Upvotes: 0
