HTML and CSS Reference
In-Depth Information
Stopping Text Wrapping
What if you want to stop filling in the space and start the next line underneath the
image? A normal line break won't do it; it just breaks the line to the current margin
alongside the image. A new paragraph also continues wrapping the text alongside the
image. To stop wrapping text next to an image, use the
clear
CSS property. This enables
you to stop the line wrapping where appropriate.
As mentioned in Lesson 8, “Using CSS to Style a Site,” the
clear
property can have one
of three values:
left
9
Break to an empty left margin, for left-aligned images
Break to an empty right margin, for right-aligned images
right
Break to a line clear to both margins
all
For example, the following code snippet shows a picture of a tulip with some text
wrapped next to it. Adding a
style
attribute to the first paragraph with
clear
set to
left
breaks the text wrapping after the heading and restarts the text after the image:
Input
▼
<p><img src=”tulips.gif” align=”left” /></p>
<h1>
Mystery Tulip Murderer Strikes
</h1>
<p style=”clear: left”>
Someone, or something, is killing the tulips of New South
Haverford, Virginia. Residents of this small town are
shocked and dismayed by the senseless vandalism that has
struck their tiny town.
</p>
<p>
New South Haverford is known for its extravagant displays
of tulips in the springtime, and a good portion of its
tourist trade relies on the people who come from as far as
New Hampshire to see what has been estimated as up to two
hundred thousand tulips that bloom in April and May.
</p>
<p>
Or at least the tourists had been flocking to New South
Haverford until last week, when over the course of three
days the flower of each and every tulip in the town was
neatly clipped off while the town slept.
</p>
<p>
“It started at the south end of town,” said Augustin Frouf,
a retired ladder-maker who has personally planted over five
hundred pink lily-flowered tulips. “They hit the houses up
on Elm Street, and moved down into town from there. After
