Question

Could someone please explain this weird phenomenon:

http://jsfiddle.net/sPA2V/

For some reason, the box footer is thought to be 0px in height (it doesn’t take into account the footer’s content as height) so the border doesn’t show properly. This can be fixed if I float the footer or if set it a fixed height. What if I can’t float it and I can’t use a fixed height – what are my options then?

HTML

<div id="footer">
    <div class="left"> <a href="#">Home</a> <a href="#">Products</a> <a href="#">About</a> <a href="#">Contact</a> </div>        
</div>    

CSS

#footer {
    width:970px;
    margin:0 auto;
    border:1px solid red;
}
#footer .left {
    float:left;
    width:250px;
    margin-top:20px;
}
#footer .left a {
    float: left;
    display: block;
    padding: 0px 0px 0px 7px;
    color: #969696;
    text-decoration: none;
}​

​

Answer 1

Use overflow: hidden; on the #footer.