IE7 Float Bug

[ZekeLL]

Hi, this bug is driving me nuts. I don't know why it happens. All I know is that it is not even consistent.

Here's a screenshot of the problem: http://www.argsoccertours.com/float-problem.jpg

And here's the code for that part:



<p>The bus will take you to your hotel, where you can leave your luggage and take a shower.</p>
<p>This day we suggest the Buenos Aires City Tour. Discover one of the most amazing cities in the world. Buenos Aires is a thoroughly modern city with more than 400 years of history. Visit Florida street, one of the most surprising pedestrian streets in South America. You don't want to miss Palermo Soho, the trendiest neighborhood in Argentina, where you will find tourists from all over the Globe;<img src="images/caption10.jpg" alt="Caminito" width="300" height="300" class="floatright" /> visit Puerto Madero, the preferred area for luxury offices and restaurants; and also check out San Isidro, the most exclusive neighborhood in Buenos Aires.</p>
<p>You will also get to see Argentina's historic buildings, the <em>Casa Rosada</em> (which means &quot;Pink House&quot; and is the President's office), the <em>Obelisco</em> (a huge tower with a lot of history), and some of the oldest, yet best mantained museums and theaters in the world.</p>
<p>Finish the day with a short visit to Recoleta, the neighborhood of choice for expats in Buenos Aires to have a good time and eat at the best restaurants.</p>
<h2>Thursday, March 4 - <span class="redsubtitle">Practice + Palermo Soho + Recoleta</span></h2>
<p>Your team will have a practice in the morning. A complimentary transfer will be available for you and your Tour Manager will help you with any arrangements that you need.<img src="images/caption11.jpg" alt="Rugby practice" class="floatright" /></p>
<p>In the afternoon you can have <em>Tapas</em> -a Spanish typical dish- in Palermo Soho, a place that is so cool you will never forget it.</p>


The CSS for floatright is:



.floatright {
float: right;
margin-top: 10px;
margin-bottom: 10px;
margin-left: 10px;
}


As you can see in the code, in both cases I insert the image the same way, but the first one looks OK and the second one doesn't. This happens on IE7 (not sure about other versions of IE), but for sure it doesn't happen on FF.

Anybody has any clue on what could cause this?

[Wickham]

Without your complete code I can't test, but there are two things you can try.

Move the image that has float: right out of the <p> tags; just put it between them:-
<p>Your team will have a practice .......................</p>
<img src="images/caption11.jpg" alt="Rugby practice" class="floatright" />
<p>In the afternoon .................</p>


or put at the beginning of a p tag; it will float to the right and the text will fill the space on the left:-
<p><img src="images/caption11.jpg" alt="Rugby practice" class="floatright" />Your team will have a practice ....................</p>

It should be the same structure for both images.

I think the first method has a better chance of success because the image is outside the p tag. In the second method and your method the image is inside a p tag but it needs much more height than the text requires and I'm surprised that there isn't a large space before the following p tag.