Nested float that resizes container?

[engwar]

I'm new to CSS and am trying to figure out how to have create the
following layout that I could easily do with tables.

I have a container that has some copy in it in a div and another div
that I float that contains an image. Everything works great when I have
a lot of text as it wraps around the image properly as below (hope this
shows up.)

------------------------------------------------------
| ----------------------- |
| | | Lorem ipsum dolor sit |
| | | consectetur adipisici |
| | | elit, sed do eiusmod |
| ----------------------- incididunt ut labore et |
| dolore magna aliqua. Ut enim ad minim |
------------------------------------------------------

This page is set up so that these sections are generated dynamically.
The problem arises when there is less copy that what is shown above.
The nested div with the image extends past the border of the the
container where the text is. Looking something like this.

------------------------------------------------------
| ----------------------- |
| | | Lorem ipsum dolor sit |
|-| | -------------------------
| |
| |
-----------------------

What I want is for the container to always be at least as large as the
floating div inside of it, regardless of the amount of copy contained.

How do I do this?

[Steve Pugh]

engwar wrote:

What I want is for the container to always be at least as large as the
floating div inside of it, regardless of the amount of copy contained.

How do I do this?

Have an element with the style property clear: both; set, after the end
of the content but before the end of the container. This will extend
the height of the container to after any floated children.

Steve