Float image to the left in CSS

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  |
|_|       |________________________________|
  |       |
  ---------

How can I fix this? the only solution to me seems setting the div container's min-height.

Answer 1

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