Phine Solutions web work notes

I have a container div which has one or several images inside. The container has a border. Since I want the images flow naturally I applied “float: left” to the image wrapper div.

Here comes the problem: the image grows outside the container DIV.

Reason: Floated elements can extend outside their containers (and their containers’ margins). To make sense of this, consider this scenario: if I have a fairly large image and a few small paragraphs floating to its right, the image has to be able to flow outside the container; otherwise only the first paragraph stays on the right side of the image and the rest will be moved below the image, which is not what I intend it to be.

To fix this, end the image(s) with a “cleardiv” (DIV with “clear:both” style) which will force the container to wrap all the images.