HTML and CSS Reference
In-Depth Information
Behind the scenes at the lounge
Now you know all about flow and how floated elements
are placed on the page. Let's look back at the lounge
and see how this all fits together.
Moving the <div>
allowed us to floa
t it to the
right and then h
ave the entire page
flow around
it. If we had lef
t the elixirs <div>
below the music
recommendations
, then the elixirs w
ould have been
floated right af
ter most of the pa
ge had been placed
.
All
these eleme
nts follow t
he
elix
irs in the H
TML, so th
ey
are
flowed aro
und it.
Remember that the elixirs <div> is floating
on top of the page. All the other elements
are underneath it, but the inline content
respects the elixirs' boundaries when they
are flowing into the page.
Also notice
that the text
wraps
around the
bottom of th
e elixirs,
because th
e text is conta
ined in a
block eleme
nt that is the
width of
the page. I
f yours doesn't
wrap, try
narrowing
your browser w
indow until
the text w
raps underneat
h the elixirs.
