CSS Tutorial - Positioning

float

One thing that often is needed when dealing with layout that includes text and images is positioning somewhere an image, and then have the text float around it. What is not possible yet, is having the image away from the borders, and let the text float around it to the right and left in the same time. But with the property float:left; or float:right;, we can place the image to one of the side borders and have the text then flow around the image. Like so:

						img.floatingpicture{
						
							float:left;

						}

Okay, this image is floating on the left side, and all the text, but also other images, or other block elements, like new divs or anything else, will float around that image. One can do the same with float:right;, just that the picture will be floating on the right side, and the text will float on the left.

As I said, this works with all elements, this here is a div, that has float:right;

There is just one little problem now: What, if the floating element is rather large, and the text (or the other elements) that should flow around it is rather short/small, and what comes then should not flow? We need another property for telling those part to not flow. That will be the property 'clear'.