Float works in IE, but won't work properly in Firefox (Simple Fix, I'm sure)

HTML & CSS
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:

  <div id="Content_Container">
    <div id="Right_Content">
    //Content here
    </div>
    <div id="Body">
     //Content here
     </div>
  </div>

#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;
}
2

Hi, IE is probaby just displaying correcty because of haslayout being set (the width). Try this new ruleset

#Content_Container {
	top: -20px;
	position: relative;
	margin: 0 auto;
	width: 900px;
	overflow: hidden;
}

I removed the display:inline; (probably the cause of the issue) and changed the overflow to hidden

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!

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.:slight_smile:

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 :slight_smile:

6

Got the site via PM. Removing display:inline fixes it. As I siad :slight_smile:

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!

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 :slight_smile:

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 :).

9

Thats the solution, thank you very much!

10

You’re welcome :).