Image float
The picture floats in the copy and the lines shorten around it — the print tradition, and the one layout job neither flex nor grid can do.
Float left
Full page preview ↗The picture floats in the copy and the lines shorten around it. Set the band's width to say how wide a column it floats in — this specimen keeps the reading measure.
A floated figure sits inside the column and the text re-flows around it, shortening for as long as the picture lasts and then returning to the full measure. It is the one layout job neither flex nor grid can do, and the reason the float property is still worth having.
Nothing is applied to the paragraphs, which is the part that surprises people: the copy stays plain. A float shortens the line boxes of everything after it, so the text needs no wrapper, no column, and no float of its own.
How wide a column it floats in is the band's business, not the arrangement's. Leave the width at the reading measure and the wrapped lines run short; set it wider and the same arrangement reads as a magazine page.
<section class="mk-section mk-figures">
<div class="mk-container mk-container--prose">
<div class="mk-figures__col">
<figure class="mk-figure mk-figure--image-float mk-figure--left">
<img src="/assets/img/everlasting.jpg" alt="A field of colour, laid down in oil and cold wax" loading="lazy" decoding="async" class="img-fluid mk-rounded-md">
<figcaption>Everlasting, 2026.</figcaption>
</figure>
<div>
<p>A floated figure sits inside the column and the text re-flows around it, shortening for as long as the picture lasts and then returning to the full measure. It is the one layout job neither flex nor grid can do, and the reason the float property is still worth having.</p>
<p>Nothing is applied to the paragraphs, which is the part that surprises people: the copy stays plain. A float shortens the line boxes of everything after it, so the text needs no wrapper, no column, and no float of its own.</p>
<p>How wide a column it floats in is the band's business, not the arrangement's. Leave the width at the reading measure and the wrapped lines run short; set it wider and the same arrangement reads as a magazine page.</p>
</div>
</div>
</div>
</section>arrangement: image-float
side: left
image: /assets/img/everlasting.jpg
alt: A field of colour, laid down in oil and cold wax
caption: Everlasting, 2026.
body: <p>A floated figure sits inside the column and the text re-flows around it, shortening for as long as the picture lasts and then returning to the full measure. It is the one layout job neither flex nor grid can do, and the reason the float property is still worth having.</p><p>Nothing is applied to the paragraphs, which is the part that surprises people: the copy stays plain. A float shortens the line boxes of everything after it, so the text needs no wrapper, no column, and no float of its own.</p><p>How wide a column it floats in is the band's business, not the arrangement's. Leave the width at the reading measure and the wrapped lines run short; set it wider and the same arrangement reads as a magazine page.</p>Float right
Full page preview ↗The same float, the other way. side is the arrangement's only sub-choice, and only a floated arrangement has one.
The same arrangement, floated the other way. Side is the only choice a float carries beyond the arrangement itself, and it is a real one: a picture on the right ends the line and a picture on the left starts it, which changes where the reader's eye lands as each line returns.
How wide a column the float sits in is not part of this choice. That is the band's width field, so the same two specimens read as a magazine page or as a narrow column without either of them becoming a different arrangement.
<section class="mk-section mk-figures">
<div class="mk-container mk-container--prose">
<div class="mk-figures__col">
<figure class="mk-figure mk-figure--image-float mk-figure--right">
<img src="/assets/img/everlasting.jpg" alt="A field of colour, laid down in oil and cold wax" loading="lazy" decoding="async" class="img-fluid mk-rounded-md">
<figcaption>Everlasting, 2026.</figcaption>
</figure>
<div>
<p>The same arrangement, floated the other way. Side is the only choice a float carries beyond the arrangement itself, and it is a real one: a picture on the right ends the line and a picture on the left starts it, which changes where the reader's eye lands as each line returns.</p>
<p>How wide a column the float sits in is not part of this choice. That is the band's width field, so the same two specimens read as a magazine page or as a narrow column without either of them becoming a different arrangement.</p>
</div>
</div>
</div>
</section>arrangement: image-float
side: right
image: /assets/img/everlasting.jpg
alt: A field of colour, laid down in oil and cold wax
caption: Everlasting, 2026.
body: <p>The same arrangement, floated the other way. Side is the only choice a float carries beyond the arrangement itself, and it is a real one: a picture on the right ends the line and a picture on the left starts it, which changes where the reader's eye lands as each line returns.</p><p>How wide a column the float sits in is not part of this choice. That is the band's width field, so the same two specimens read as a magazine page or as a narrow column without either of them becoming a different arrangement.</p>When to reach for it
Reach for a float when the picture is small enough that stopping the reader for it would waste their attention — a portrait beside the paragraph introducing the person, a detail shot beside the sentence describing it. The picture and the copy are read together rather than in turn, which is the whole difference between this and a plate.
How it works
The figure floats and the text re-flows around it. The part worth being precise about
is what does NOT happen: nothing is applied to the paragraphs. A float shortens the LINE
BOXES of everything after it in the same formatting context, so the copy stays plain — no
wrapper, no column, no float of its own. What breaks a float is a paragraph that
establishes its own block formatting context (any overflow but visible will
do it), or a clear further down.
Where it steps down
Under 40rem of band the float is dropped and the figure becomes a plate — a float in a phone-width column leaves lines of four words, which is not a smaller float but an unreadable one. The threshold is a container query against the band rather than a media query against the window, so the specimen above steps down inside a narrow documentation column exactly the way it would on a phone.
The column is not part of it
A float at the reading measure and the same float at container width look like two
patterns and are one — same class, same rules, and only the column around them changed.
So the column stays the band's width field and never appears in an
arrangement's name. A container-width float would put it in two places at
once, and an author could then set a width that disagreed with the arrangement they
picked, leaving one of the two to lose.
The arrangement says how the picture relates to the column; the band says how wide the column is. Two questions, each asked once.