CSS Float problem in FireFox 1

[Tokolosche]

Hello,

My problem is that the background is showing correctly in IE6 & IE 7, but not in FireFox.

I think that this is due to the float style used on the main content, as the page background stops right after the left side menu.

If anyone is able to help it would be very appreciated!

The page link is:

http://www.chocolatefinance.com.au/business-loans/business-overdrafts.php

The full style sheet can be seen at:

http://www.chocolatefinance.com.au/style.css

The main style sheet info is:

#main {
margin: 0 auto 0 auto;
width:800px;
background-image: url(images/main-bg.jpg);
background-repeat: repeat-y;
}
#main-content {
width: 600px;
float: right;
margin-top: 7px;
margin-right: 30px;
margin-bottom: 30px;
}
#footer {
margin: 0 auto 0 auto;
width:800px;
height: 60px;
background-image: url(images/footer.jpg);
background-repeat: no-repeat;
}
#side-menu {
width: 120px;
margin-left: 7px;
margin-top: 0px;
}

 

[Vragabond]

Floating elements makes them not contribute to the height of the containing element, they simply hang over. That is why the container only extends to the bottom of the longest non-floated element. You can get rid of that by adding an element at the bottom of the floated elements that is not floated and cannot be positioned next to floating elements. For that to work, this element must have [tt]clear[/tt] specified for either of the sides elements are floated above (left or right or if you want to be sure, both). For you, this is a very simple solution. Just add [tt]clear: right;[/tt] to your #footer for it to work.

 

[Tokolosche]

Awesome! Thank you!