[X]

Text Wrap Before Floats

layout hacks 1995 partly

ALIGN on the image, with HSPACE and VSPACE holding the words off it.

In 2026: Partly: all three attributes are obsolete and every browser still maps them to the float and margins they always meant, so the demo wraps exactly as it did in 1995. BORDER mattered too, because a linked image drew a blue border unless you said border=0, which everybody said, every time.

Where it came from: Netscape Navigator 1.0 extensions, 1994, then HTML 3.2. All obsolete in HTML5, all still rendered.
MDN HTML 3.2

<img src="https://xbawx.com/inc/img/demo/photo_sl0.jpg" align="left" hspace="12" vspace="6"
     width="200" height="150" alt="">
<font face="Verdana" size="2">This text wraps around the picture because of
align="left" on the IMG, and stands off it by exactly the HSPACE and VSPACE.
No CSS anywhere. Browsers still translate all three attributes into the float
and margins they always meant, and the modern version is one line:
<code>img { float: left; margin: 6px 12px }</code>.</font>
<br clear="left">
<p style="font:13px Verdana;margin-top:8px"><code>&lt;br clear="left"&gt;</code>
above is the fourth relic here: clearing a float before clear existed.</p>
sandboxed demo · breaks nothing but itselfrestart

More in layout hacks

all 22 in layout hacks › · the whole library ›