Flowing text around an image is one of the oldest layout techniques in print and on the web. These examples use CSS float for single-column layouts and CSS grid for the two-column layout.
Float left — text wraps right
The image anchors to the left margin and the paragraph text flows along its right edge. A margin-right keeps breathing room between the image and the text.
Float right — text wraps left
The image moves to the right margin and the text fills the space to its left. The same margin-left gap prevents the text from crowding the image.
Float left with caption
Wrapping the image and caption together in a <figure> element keeps them paired as a single floated unit. The caption sits beneath the image, flush with its left edge.
Float right with rounded image
A circular crop combined with a right float softens the layout and suits portrait-oriented photographs. The border-radius: 50% collapses the image into a circle regardless of its original dimensions.
Float left with drop shadow and border
Adding a subtle box shadow and a fine border frames the image like a printed photograph and draws the eye before the reader reaches the text.
Two-column layout — image and text side by side
CSS Grid splits the page into a fixed-width image column and a flexible text column. Unlike float-based wrapping, neither column overlaps the other at any viewport width.
Market stalls at dawn, late September.
Early morning at the village market
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.