HTML and CSS Reference
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.