IE adjacent float combined with text wrap problem

Hello, I did a Google and Sitepoint forum search and was unable to find anyone with this problem. I’m hoping someone here has seen it before and can offer advice.

Here is how it looks like Firefox (as intended):

Here is how it looks in IE6 and IE7 (notice the text doesn’t wrap across floats like it does in Firefox)

Here is the HTML:

<body>
  <div id="container">
    <div id="main">
		<div class="module1">
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eu enim neque. Integer mollis, massa a sodales fermentum, enim risus tincidunt tortor, quis luctus ligula odio vitae magna. Nullam vel orci diam, at pharetra urna. Sed turpis magna, sollicitudin eu viverra vitae, semper eget dui. In hac habitasse platea dictumst. Ut auctor aliquam egestas. Suspendisse lobortis est id enim pretium ut tempus lectus pharetra. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque eget purus diam, a gravida diam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut nec nisl non nibh mattis sagittis. </p>
		</div>
		
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eu enim neque. Integer mollis, massa a sodales fermentum, enim risus tincidunt tortor, quis luctus ligula odio vitae magna. Nullam vel orci diam, at pharetra urna. Sed turpis magna, sollicitudin eu viverra vitae, semper eget dui. In hac habitasse platea dictumst. Ut auctor aliquam egestas. Suspendisse lobortis est id enim pretium ut tempus lectus pharetra. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque eget purus diam, a gravida diam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut nec nisl non nibh mattis sagittis.</p>

		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eu enim neque. Integer mollis, massa a sodales fermentum, enim risus tincidunt tortor, quis luctus ligula odio vitae magna. Nullam vel orci diam, at pharetra urna. Sed turpis magna, sollicitudin eu viverra vitae, </p>
		
		<div class="module2">
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eu enim neque. Integer mollis, massa a sodales fermentum, enim risus tincidunt tortor, quis luctus ligula odio vitae magna. Nullam vel orci diam, at pharetra urna. Sed turpis magna, sollicitudin eu viverra vitae, semper eget dui. In hac habitasse platea dictumst. Ut auctor aliquam egestas. Suspendisse lobortis est id enim pretium ut tempus lectus pharetra. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque eget purus diam, a gravida diam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut nec nisl non nibh mattis sagittis. </p>
		</div>

		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eu enim neque. Integer mollis, massa a sodales fermentum, enim risus tincidunt tortor, quis luctus ligula odio vitae magna. Nullam vel orci diam, at pharetra urna. Sed turpis magna, sollicitudin eu viverra vitae, semper eget dui. In hac habitasse platea dictumst. Ut auctor aliquam egestas. Suspendisse lobortis est id enim pretium ut tempus lectus pharetra. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque eget purus diam, a gravida diam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut nec nisl non nibh mattis sagittis. </p>
		
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eu enim neque. Integer mollis, massa a sodales fermentum, enim risus tincidunt tortor, quis luctus ligula odio vitae magna. Nullam vel orci diam, at pharetra urna. Sed turpis magna, sollicitudin eu viverra vitae, semper eget dui. In hac habitasse platea dictumst. Ut auctor aliquam egestas. Suspendisse lobortis est id enim pretium ut tempus lectus pharetra. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque eget purus diam, a gravida diam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut nec nisl non nibh mattis sagittis. </p>
	
    </div>
  </div> <!-- end of #container -->
</body>

Here is the CSS:

		#main {
			width:960px;
			margin:25px auto;
		}
		
		.module1 {
			float:left;
			width:300px;
			border:1px solid blue;
			margin:0 15px 15px 0;
		}
		.module2 {
			clear:both;
			float:left;
			width:300px;
			border:1px solid red;
			margin:0 15px 15px 0;
		}
		
		p {
			margin-bottom:10px;
		}

Some possible solutions:

  1. Float all <p> tags left, targeted only to IE6-7. I don’t know why this works, which is why I’m hesitant to use it.
  2. Change the HTML markup so that .module2 comes directly after .module1. (Along the lines of Example2a from http://css-class.com/articles/explorer/floats/floatandcleartest1.htm)

Does anyone know of how to fix this without altering the markup or having to float the <p> tags left for IE6-7?

Does anyone know of how to fix this without altering the markup or having to float the <p> tags left for IE6-7?

Hi,
You have already discovered the fixes for IE6/7, those will be the only way to fix it. The problem comes from the broken float model in IE6/7.

  1. Float all <p> tags left, targeted only to IE6-7. I don’t know why this works, which is why I’m hesitant to use it.

It works in IE because you have a float adjoining a float. IE has problems when a static block comes before a float in the source order.

  1. Change the HTML markup so that .module2 comes directly after .module1.

That’s probably the way I would do it. Either that or just go ahead and make a left column.

Thanks for the response! I’ll probably change the source order.