HTML and CSS Reference
In-Depth Information
Q:
Why didn't we have to add “clear:
right” to the “tableContainer” <div>
below the header?
A:
Because the image we floated is the
same exact height
—
108px
—
as the other
image in the header, so there's no room for
the other content in the page to move up and
flow around the floated image. Both images
take up the exact same amount of vertical
space, so the other elements in the page
stay firmly in their places.
Q:
What if I float an image that's in a
paragraph of text?
A:
Then the text will flow around the
image. It works just like when we floated the
elixirs <div> in the lounge; remember how
the text in the rest of the page flowed around
that <div>? Same thing if you float an image.
Q:
Could we have positioned the
header images using one of the other
layout strategies we talked about?
A:
Yes, indeed. There is usually more
than one way of doing things in CSS.
Another strategy might have been to use
absolute positioning. We'll look at how to
absolutely position an image next.
Hey guys! Starbuzz just won the
Roaster of the Year Award. This is
huge. Can we get it on the page front and
center? All our customers need to see this.
Top priority; make it happen!
Well, we could just throw
this as an image into any old
paragraph on the page, but
the CEO really wants this
to be noticeable on the page.
What if we could place the
award on the page like this?
Not only does that look great,
but it's exactly what the
CEO wants. But how? Is this
another situation for using
float
? Or are we going to
need another strategy?
