HTML and CSS Reference
In-Depth Information
How to float an element
Let's step through an example of how you get
an element to float, and then we'll look at what
it does to the flow of the page when you do.
text
h1
h2
text
p id=“amazing”
text
First, give it an identity
Let's take one of these paragraphs and give
it an id. We'd like to call it the “amazing
floating paragraph,” but we'll just call it
“amazing” for short.
h2
text
p
span
em
span
em
p
text
text
text
p
img
img
img
img
text
h1
h2
text
Now give it a width
A requirement for any floating element is that it
have a width. We'll make this paragraph 200 pixels
wide. Here's the rule:
p id=“amazing”
text
text
text
#amazing {
width: 200px;
}
text
h2
p
span
em
span
em
No
w the pa
ragraph i
s 200 pi
xels
wid
e, and th
e inline c
ontent
con
tained in
it has a
djusted t
o that
wid
th. Keep
in mind,
the para
graph
is
a block el
ement, so
no eleme
nts are
go
ing to mo
ve up bes
ide it bec
ause all
blo
ck eleme
nts have
linebreaks
before
an
d after t
hem.
p
text
text
text
p
img
img
img
img
