HTML and CSS Reference
In-Depth Information
Test driving the width
Next, save the CSS and then reload the “lounge.html” file. You'll see the elixirs
section get much skinnier, thanks to the width you gave it. The width of the
content in the
<div>
is now exactly 200 pixels. There's also some interesting
behavior you should check out…
No
w all
the co
ntent
in th
e elixi
rs
<d
iv> fit
s into
a spa
ce tha
t is 2
00
pix
els wi
de. It
doesn
't cha
nge, e
ven if
Noti
ce tha
t the
heig
ht of
the el
ixirs
sect
ion go
t a lo
t
talle
r. Th
at's be
cause
we m
ade i
t narr
ower,
so t
he con
tent
take
s up m
ore r
oom
vert
ically
instea
d.
yo
u mak
e your
brow
ser win
dow r
eally
wi
de, or
really
narro
w. Tr
y it!
Co
mpare the
behavior of
the <div>
to
that of th
e other el
ements
wh
en you mak
e your brow
ser
win
dow wide.
The paragr
aphs
au
tomatically
expand to
fill the
wi
dth of the
browser. W
e'll talk
ab
out that m
ore in a se
c…
Can you resize your browser window to less than the width of the elixirs <div>? Some browsers
won't let you go that narrow; others will. If you can go narrower, compare the text in the elixirs
<div> with the rest of the text on the page. The other paragraphs resize themselves no matter
how wide or narrow you go, but the elixirs <div> never gets narrower or wider than 200 pixels.
