To make text surround an image in CSS we basically need to understand how floating works. When an element is floated, it's removed from the normal flow. Unlike positioning, other elements are aware of its presence and surround it. More precisely, a float steals some space from other elements. This is called float damage in Firefox's terminology. Another important thing to bear in mind is the position of the float within the source code. A float that comes before or after a given element will behave differently from a float that lies inside an element. A typical example of the last case is when you have a floated image inside a paragraph. Further, a float is vertically contained by other elements. CSS specifications say that a float must place itself always at the top of its container, unless there are other elements before it.
Let's say that we have the following HTML structure:
<div id="container"> <p>...</p> <div class="pic"> <img src="url" /> <p>...</p> </div> <!--other paragraphs--> </div>
We want the element with class pic to be surrounded by text. This element also contains a caption for the image. Here's how we can do:
p {
line-height: 1.4;
margin: 0;
}
div.pic {
float: left;
width: 250px;
padding: 5px 8px 0 0;
}
div.pic img {
display: block;
width: 100%;
height: 200px;
}
div.pic p {
margin: 0;
text-align: center;
font-style: italic;
padding: 4px 0;
}
As you can see, the container of the image has been floated to the left. All other paragraphs will surrounding it, as you can see in the demo below.