HTML and CSS Reference
This CSS is so easy you could probably do it in your sleep, after all the layout experience you've
had in this chapter already. Go ahead and write the CSS to fix the images in the header. You
know you're going to use float; fill in the blanks below with the rest of the rule you need to get
the images into the right place. Check your answer at the end of the chapter before you go on.
Test drive your float
Now the slogan image is all the way over on
the right, and it stays there, even if you
change the browser window size.
Get your CSS updated in “starbuzz.css” and reload the
Starbuzz page. You should see the header slogan image
all the way over on the right side of the page, just where it
should be, and, better yet, it stays over on the right even if
you open your browser really wide. Success!
How float works in the header
Remember the steps for how to float an element from
earlier in the chapter:
Give the element an identity. We gave the image we
wanted to float the id “headerSlogan”. Check.
Give the element a width. We didn't actually have
to do that explicitly this time (although you could). Why?
Because an image element has a specific width by default:
it's the width of the image itself. CSS recognizes that the
image has a width, so we don't have to specify it ourselves.
Float the element. Check, we floated it. The <img> is
nested in the “header” <div> , so it floats up to the top
right of the <div> . But remember, we set the height of
the header to be exactly the same as the height of our two
images. And, as we explained before, the other inline content in the
page will flow around the floated element. In this case, the other
inline content in the header is the logo image, which happens to also
be exactly the same height as the slogan image and the header. So
the two images line up perfectly!