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>
When you use overflow on an element it will create a rectangular block to the side of any floated content and won’t wrap. It’s useful for creating a column that you don’t want to wrap around a float.
Make sure you remove the display:inline (as Ryan mentioned) from your content_container as that needs to be block level.
No no, you should keep the overflow property on there. I admit I didn’t test my code when I posted but it should have worked :). Something is probably going wrong in your site, if you wouldn’t mind directing me to a site we could see what’s up
Did you add the Overflow back to #Body (which I removed, its now the same propertys just #Main_Content)? Because adding the overflow back in, and removing the display:inline still yeilds no wrap for me
Edit: I now have the page so the overflow property is in #Main_Content and the display:inline is removed. If you view in IE, it wraps. In firefox, no wrap.
Your picture in the beginning was a bit confusing. I thought you were asking why is the parent not extending past the floated elements
To answer your question, Overflow:hidden; needs to be removed from #main_content. That will allow the unfloated #main_content to slide over to the floated right column and have the text under :).