tlshaheen — 2010-01-25T22:18:44-05:00 — #1
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:
margin: 0 auto;
ryanreese — 2010-01-25T23:10:16-05:00 — #2
Hi, IE is probaby just displaying correcty because of haslayout being set (the width). Try this new ruleset
margin: 0 auto;
I removed the display:inline; (probably the cause of the issue) and changed the overflow to hidden
tlshaheen — 2010-01-26T06:42:09-05:00 — #3
Thanks, but I've tried (and now tried again) both of those, and neither changes the look cept a tad, and doesn't fix it.
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!
paulob — 2010-01-26T06:57:13-05:00 — #4
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.:)
ryanreese — 2010-01-26T09:53:03-05:00 — #5
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
ryanreese — 2010-01-26T17:58:10-05:00 — #6
Got the site via PM. Removing display:inline fixes it. As I siad
tlshaheen — 2010-01-26T20:57:01-05:00 — #7
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.
thanks for helping with this!
ryanreese — 2010-01-26T21:34:52-05:00 — #8
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 :).
tlshaheen — 2010-01-26T21:45:26-05:00 — #9
Thats the solution, thank you very much!
ryanreese — 2010-01-26T22:40:32-05:00 — #10