Floating images flow outside the containing DIV

I have a content div with some text in it and an inner div with some text and images in it. As I add text to the inner div it 'grows' (I can tell because I added a colored border to it.) When I add images to the inner div the images flow outside of the inner box but stay within the main content div.

Date Created: 2nd October 2006
Date Modified: 2nd October 2006

Home > CSS > Floats flow outside!

To solve query in WebmasterWorld CSS Forum:
http://www.webmasterworld.com/css/3104700.htm

Reason for 'problem' - the floated image is being taken out of the flow of the page and the containing DIV is therefore only accommodating the textual content (two paragraphs). To get around this we can simply add a 'clearing' DIV before the end of the containing DIV to expand the container to fit. OR... add overflow:hidden; width:100%; to the containing DIV.

[outerbox] Some paragraph text here.

[inerbox] Some paragraph text here.

[inerbox] 2nd paragraph... more here

Some text which wraps to the right of the floated image.....

Some more text.....

And more and more text...

This text should start to wrap around the left of the 2nd image, since the 2nd image is floated right.... but if you don't have enough content above then it will also wrap around the right of the previous image!

You need quite a bit of text to see the full effect....

Blah, blah, blah....

[Home]