Hanging image
The same float, pulled part of the way out — the picture hangs half in the margin, so the lines shorten by less than its width.
Hanging left
Full page preview ↗The float with part of its width pulled into the margin — full presence for the picture, a workable measure for the text.
A hanging image floats like any other, but part of it has been pulled out of the column. The lines still shorten — this is a float, and that is what floats do — but they give up only the part of the picture still standing inside the measure.
That is the trade this arrangement exists to make. Inside a forty-rem column a picture wide enough to be worth looking at leaves the text too narrow to read; hanging a third of it in the margin buys the width back without shrinking the picture.
How far it hangs is not a fixed distance but whatever room the band leaves around the column, up to a ceiling. That is why this specimen hangs a little here and further on the full page — the same arrangement, given more margin to use.
<section class="mk-section mk-figures">
<div class="mk-container mk-container--prose">
<div class="mk-figures__col">
<figure class="mk-figure mk-figure--hanging-image 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 hanging image floats like any other, but part of it has been pulled out of the column. The lines still shorten — this is a float, and that is what floats do — but they give up only the part of the picture still standing inside the measure.</p>
<p>That is the trade this arrangement exists to make. Inside a forty-rem column a picture wide enough to be worth looking at leaves the text too narrow to read; hanging a third of it in the margin buys the width back without shrinking the picture.</p>
<p>How far it hangs is not a fixed distance but whatever room the band leaves around the column, up to a ceiling. That is why this specimen hangs a little here and further on the full page — the same arrangement, given more margin to use.</p>
</div>
</div>
</div>
</section>arrangement: hanging-image
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 hanging image floats like any other, but part of it has been pulled out of the column. The lines still shorten — this is a float, and that is what floats do — but they give up only the part of the picture still standing inside the measure.</p><p>That is the trade this arrangement exists to make. Inside a forty-rem column a picture wide enough to be worth looking at leaves the text too narrow to read; hanging a third of it in the margin buys the width back without shrinking the picture.</p><p>How far it hangs is not a fixed distance but whatever room the band leaves around the column, up to a ceiling. That is why this specimen hangs a little here and further on the full page — the same arrangement, given more margin to use.</p>Hanging right
Full page preview ↗The same, hanging into the other margin.
Hanging the other way. The column does not move — that is the part worth checking on a page that uses several of these, because a reader scrolling past a run of them should never feel the text drifting left and right underneath them.
What moves is the picture, and only ever outward: the measure it leaves behind is the same measure the paragraph above it had.
<section class="mk-section mk-figures">
<div class="mk-container mk-container--prose">
<div class="mk-figures__col">
<figure class="mk-figure mk-figure--hanging-image 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>Hanging the other way. The column does not move — that is the part worth checking on a page that uses several of these, because a reader scrolling past a run of them should never feel the text drifting left and right underneath them.</p>
<p>What moves is the picture, and only ever outward: the measure it leaves behind is the same measure the paragraph above it had.</p>
</div>
</div>
</div>
</section>arrangement: hanging-image
side: right
image: /assets/img/everlasting.jpg
alt: A field of colour, laid down in oil and cold wax
caption: Everlasting, 2026.
body: <p>Hanging the other way. The column does not move — that is the part worth checking on a page that uses several of these, because a reader scrolling past a run of them should never feel the text drifting left and right underneath them.</p><p>What moves is the picture, and only ever outward: the measure it leaves behind is the same measure the paragraph above it had.</p>When to reach for it
Reach for a hang when you want a float and the measure cannot afford one. Inside a 40rem column a picture wide enough to be worth looking at leaves the text too narrow to read; hanging a third of it in the margin buys the width back without shrinking the picture. It is the arrangement most editorial pages actually want and most often have no name for.
How it works
An ordinary float with a negative inline margin. The lines still shorten — this is a float, and that is what floats do — but only by the part of the box still standing inside the column: pull 8rem of a 22rem picture out and the copy gives up 14rem of the measure instead of 22. The column itself does not move, which is what to check on a page carrying several of these; a reader scrolling past a run of them should never feel the text drifting underneath them.
Where it steps down
It degrades BY DEGREE rather than by threshold, which is the difference between
this and the margin image. The pull is computed — the room between the column and the
band's edge, less a rem so the picture never touches it, capped at 8rem — so a band with
a little margin hangs a little and a band with plenty hangs the full amount. Nothing
switches, so there is no width at which the arrangement quietly becomes a different one:
the specimen above hangs about 75px inside this column and the full 128px on a page, and
it is the same figure at the same size in both.
Two ends to that scale. A band no wider than its column has no margin to use — the
container rung, or a phone — so the hang flattens to an ordinary float. And
under 40rem of band nothing floats at all: the figure becomes a plate, because a float in
a phone-width column leaves lines of four words.
One float, three distances
An image float, a hanging image and a margin image are the same mechanism at three settings: a float, and how much of it has been pulled out of the column — none, some, all. The difference between them is a number.
Each setting earns a name because the number changes what the reader gets, not what the CSS does: text that wraps, text that wraps loosely, text left untouched. That is the test for adding a fourth — a distance nobody can feel is a value, not a name.