I'm having a content div floating on the right (like a menu), and the content wrapped around it. In IE, the menu floats properly and the content wraps around it properly. However, in Firefox, there is a problem. The menu floats correctly, however the content won't wrap around it - that is, the content stays a fixed width the whole length of the page, as if the menu was that long. The following picture shows the problem in Firefox: My code is as follows: <div id="Content_Container"> <div id="Right_Content"> //Content here </div> <div id="Body"> //Content here </div> </div> Code (markup): #Body { padding-right: 20px; background: #FFFFFF; margin-right: 0px; overflow: auto; } #Content_Container { top: -20px; position: relative; margin: 0 auto; width: 900px; display: inline; overflow: auto; } #Right_Content { width: 235px; float: right; background: #FFFFFF; padding: 10px; } Code (markup):
OK, I think I understand what your trying to do. But I don't understand the purpose of your #body div. If you have a menu of links you want to put in a div and float to the right and then let the content wrap around underneath, then it would be done like this: <div id="Content_Container"> <div id="Right_Content"> <!-- The menu content goes here --> </div> <!-- The main content goes here --> </div> HTML: Then for the CSS: #Content_Container { margin: 0 auto; width: 900px; } #Right_Content { width: 235px; float: right; background: #FFFFFF; padding: 10px; } Code (markup): Whatever is in the #Content_Container will wrap around the floated Right_Content div.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Try this</title> <style type="text/css"> #Body { float: left; width:630px; border:1px solid #ccc; padding:10px; } #Content_Container { margin: 0 auto; width: 900px; border:1px solid #000; } #Right_Content { width: 210px; float: right; border:1px solid #ccc; padding:10px; } #logo{ border:1px solid #ccc; } .clear{ clear:both; } </style> </head> <body> <div id="Content_Container"> <div id="logo">logo here logo herelogo herelogo herelogo herelogo herelogo here </div> <div id="Body"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at laoreet lectus. Proin blandit laoreet mauris et iaculis. Praesent ac ullamcorper nunc. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec accumsan neque nec eros scelerisque quis auctor lorem tincidunt. Ut ipsum dui, bibendum ut facilisis vel, interdum in massa. Phasellus ultrices convallis aliquam. Duis interdum sollicitudin sem et aliquet. Morbi lacinia libero vel lectus placerat et vulputate quam vulputate. Integer odio velit, gravida sit amet feugiat at, porttitor quis turpis. Ut quis libero turpis. Nullam purus augue, euismod a suscipit ac, mollis sit amet felis.</p> <p>Quisque volutpat fringilla viverra. Sed commodo dolor accumsan quam semper lobortis non eget risus. Aliquam bibendum nisi nec metus venenatis aliquet. Aliquam id turpis in nulla ullamcorper luctus. Aliquam tincidunt, risus sit amet tincidunt vehicula, risus enim mattis quam, quis euismod erat elit at magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed in commodo ipsum. Donec sagittis quam ac nibh cursus sed imperdiet odio condimentum. Nunc sed tellus magna, at ullamcorper augue. Sed eros lorem, mollis eget dictum ut, dictum quis nulla. Curabitur semper fermentum nisi, eget varius sapien dapibus vitae. Aenean non nisi velit. Vivamus dolor ipsum, venenatis eu posuere nec, accumsan sit amet massa. In suscipit consectetur quam et pulvinar. Vivamus sagittis, mauris dignissim iaculis vulputate, lectus lacus gravida elit, non vehicula neque metus nec lectus.</p> </div> <div id="Right_Content"> <p> <ul> <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li> <li>Maecenas lacinia semper ante, id faucibus eros iaculis placerat.</li> <li>Integer id quam eget est semper pulvinar.</li> <li>Donec vulputate augue non sapien scelerisque pretium.</li> <li>Sed volutpat euismod magna, sed dapibus velit vehicula eget.</li> <li>Suspendisse vel justo at tortor pharetra ultrices porta vitae sapien.</li> <li>Maecenas gravida arcu sit amet mi mollis vel placerat odio accumsan.</li> </ul> </p> <p> <ul> <li>Curabitur ac odio a lacus pellentesque lacinia.</li> <li>Morbi bibendum diam sed tellus vehicula a pellentesque libero hendrerit.</li> <li>Vestibulum ac libero id justo vulputate vestibulum.</li> </ul> </p> <p> <ul> <li>Nunc vel leo in sapien tincidunt bibendum in at sem.</li> <li>Mauris suscipit ante quis quam facilisis et blandit est tempus.</li> <li>Proin bibendum molestie nunc, sed faucibus est molestie id.</li> <li>Aenean ut ante quis neque pretium scelerisque sed at massa.</li> </ul> </p> <p> <ul> <li>Etiam tincidunt justo vel erat pulvinar consequat.</li> <li>Duis fermentum felis ac justo euismod suscipit.</li> <li>In ac ligula id augue porttitor eleifend.</li> <li>Cras vestibulum est iaculis diam sagittis bibendum.</li> </ul> </p> </div> <div class="clear"></div> </div> </body> </html> HTML: try this
Thanks, but I did fix it however, by removing the overflow declaration from #Body. Not sure why I didn't try it before, but it works now!
IE does not handle floats properly so the problem with this, as always, is IE, not FF but you've got it working.
A fuller explanation of why removing overflow: hidden from the body can be found on the other forums the OP posted this question on.