Css: float image left - problem

Question

I am 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  |
--------------------------------------------

markup should be correct:

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

the problem is that if there is only text, the image will “float” out of the div container, 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 for me is to set the minimum height of the div container. 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 element divusing style="clear:both;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>