Web development by Gabriele Romanato

Post navigation

CSS: making text surround an image

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.