Question

The following code:

<div>
    <img src="" style="float: left;">
    <p>Lorem Ipsum...</p>
</div>

Renders a div container with text, and a floated image on the left. Great. The text included therein also expands the div as much as it can while maintaining the text in a single line (unless otherwise writ). However, with a floated image, the width of the div container does not expand as much as it can, and prematurely line-breaks the text based on the width of the image.

That is, if the floated image is 200 pixels wide, “200 pixels” of text on the right end of the div will all be bumped to the next line. It’s as though the DIV container doesn’t see the extra text, and sets the dynamic div width too short!

… which, I do realize, is by design, simply because the image is “floated”, and is not a block/inline element. (At least, I think I worded that correctly…?)

So, how can I achieve what I want without resorting to (ick…) tables?

Answer 1

Floated elements are removed from the flow of the page and will not cause the enclosing elements to expand.

Take a look here. That tutorial talks about enclosing floated elements by using the overflow property.