Question

I have an image that is floated to the left and then some text to the right of the image. However the text is just long enough that one line of a paragraph goes below the image. How to I keep this text inline with the paragraph and keep it from wrapping around the picture?

Answer 1

If you don’t want to worry about knowing and setting any widths, you can do this by establishing a new block formatting context for the text container.

i.e. For the markup:

<img src="image.jpg">
<p>Some text

all you need do is give the <p> element an overflow other than “visible”. For example:

p { overflow:auto; }

Use a little bit of margin-right on the <img> to separate the text from the image.