css: float image to the left - problem

Question

i'm trying to do something like:

--------------------------------------------
| --------- text text text text text text  |
| | image | text text text text text text  |
| |       | text text text text text text  |
| |       | text text text text text text  |
| --------- text text text text text text  |
| text text text text text text text text  |
| text text text text text text text text  |
--------------------------------------------

the markup should be right:

<div>
    <img src='myimage.jpg' style='float:left;'>
    tex text text ..
</div>

the problem is - if there's only a few text, the image will "float out" from the container div, which looks like this:

--------------------------------------------
| --------- text text text text text text  |
| | image | text text text text text text  |
|_|       |________________________________|
  |       |
  ---------

any ideas to fix this? the only solution to me seems setting the div container's min-height. thx

Answer 1

div {
    overflow: hidden;  /* except IE6 */
    display: inline-block; /* IE6 */
}
div {
    display: block; /* IE6 */
}

Answer 2

add an empty element at the end of the div element with style="clear:both;, just like this:

<div>
    <img src='myimage.jpg' style='float:left;'>
    tex text text ..
    <div style="clear:both;"></div>
</div>

Answer 3

<div style="overflow:auto"> </div>