Why css float dose not work on firefox and how to improve

my blog is built by wordpess, content sigle page and sidabar, i used float:left, not use clear:both, but now it dispaly normal on ie7, but does not work on firefox, sidebar does not float on its position, it display on bottom of article content,

I need left is article content, right is sidebar, all height is auto, how to inprove it?

This is main css:

#wrapper {width: 950px;margin: auto;text-align: left;padding-bottom: 2px;}

#header {height: 60px;padding-top: 15px;margin:0px ;background-color:#FEFFFB;}

#body {background-color:#FFFFFF;color:#003300;padding-bottom: 10px;
border:1px #006600 dashed; }

#page {margin:10px;float:left;padding-top:0px;overflow:hidden;
width:620px;}

#sidebar {width: 300px;float:left;padding: 5px;}

Hi,
IE7 will contain it’s floats when “haslayout” has been set. The width on your #wrapper div is causing IE7 to contain floats.

Modern browsers will contain their floats by setting overflow:hidden; on the float’s parent.

Try this -


[B]#wrapper[/B] {
width: 950px;
[COLOR=Blue]overflow:hidden;[/COLOR]
margin: auto;
text-align: left;
padding-bottom: 2px;
}

If that does not work we will need a link to your page so we can see what you have done with the html. Or post the html if you don’t have a link.

If those floats are nested in the #body div then the 1px border on the #body div could be causing the float drop. The available space in the #body div would be 948px (assuming it is nested in the #wrapper) and your combined float widths with margins and padding are 950px.