Wrap text around a photo – CSS Exercise with Solution

Float is still the right tool for wrapping text around a picture.

What to build

A magazine-style article.

Requirements

img floats to the left, with a right margin of 16px and a bottom margin of 8px.
.note is an inline-block with a width of 120px.
footer starts below the image, using clear: both.

Constraints

Do not use flexbox or grid.

Example

img { float: right; } places the image on the right, with text flowing down its left side.

Why it works

A float leaves the normal flow, and lines of text shorten to fit around it. clear makes the next block drop below it.

Hints

Hint 1

The image floats, and the text follows along.

Hint 2

clear: both makes the footer start below the float.

Hint 3

A margin keeps text away from the image's edge.

Solution

Show one correct solution (try it yourself first)

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Float</title>
  <style>
    img { float: left; margin-right: 16px; margin-bottom: 8px; }
    .note { display: inline-block; width: 120px; }
    footer { clear: both; }
  </style>
</head>
<body>
  <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'/%3E" alt="A photo of the harvest" width="120" height="120">
  <p>Rice is planted in flooded fields. <span class="note">A side note</span> The farmers transplant each seedling by hand.</p>
  <footer>Published in May</footer>
</body>
</html>

Lesson: Display and normal flow →