Why is this floated image disrupting the text flow?

Maybe I’m just tired, but can anyone tell me why this image is screwing up the text flow? bit.ly/1eFppp8 I’m referring to the thumbnail image under “The Latest From Our Blog” at the lower left. This isn’t behaving like a normal float, but disrupting the paragraph. Any ideas?

What do you mean ? the tex wraps around a floated element ( as it’s doing on your link). If you want the text not to be side by side with the image you need to give the image display:block; ( no float) . hope that helps

Hi,

As Dresden said the float is behaving as it should so you may need to explain what you are seeing and what you think is wrong with it. Or if this is a specific browsers (and version) bug then let us know which browser and which version :slight_smile:

I’ve tried it in current FF and Chrome. Here’s the problem: Look at the phrase “basis for Remember,” which splits on a line near the bottom of the image. See the extra line spacing below “basis”? It looks like the margin-bottom of the image is pushing down a block of text in the same paragraph. Normally I would expect the paragraph to maintain its line-height integrity, leaving the extra space below the image and not between the lines of text. Also, why does the word “for” wrap to the next line? It is surely short enough to appear on the same line with “basis.”

Hi,

The word for wraps because you have the word “remember” in an em element with no space and so wraps as a whole with the word before it as though it said “forbefore” as browsers can remove white space before an element starts. Place the space inside the em and it will stay on the same line.


<em> Remember, </em>

If you make that above change it will become clear why there was more whitespace than you thought because the words “for” and “remember” would no longer fit beside the image and wrap to the nearest available space which is below the image.

As you can now see the words will sit alongside the image as expected.

(As an aside note that you will never get a perfect wrap unless the multiple line-heights add up exactly to the height of the image - which would be very rare unless you explicitly controlled it.)

You’re my hero! :slight_smile:

(As an aside note that you will never get a perfect wrap unless the multiple line-heights add up exactly to the height of the image - which would be very rare unless you explicitly controlled it.)

I realize that; I just want the line height of the paragraph to remain consistent - as it does now.