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.
Search WWH ::

Custom Search