HTML and CSS Reference
In-Depth Information
we're working with). There's also the site's primary navigation to deal with, and we'll get to that soon, but
first we'll get the rest of the elements lined up where we want them to be.
The logo will appear on the left side of the masthead and the other elements—the store info, search form,
and cart link—will appear on the right. That's easy enough to accomplish with the float property, and
we'll assign widths to each block that will ensure the liquid layout can shrink and expand freely without the
floats colliding. The logo gets a bit of extra width (50% of the parent element's width) so that even in
narrow windows it will have enough room for the fixed-size image without clipping or overflowing. The
image won't usually need that much room, but the extra width prevents the containing element from
shrinking smaller than the image in narrow windows.
The store info and utilities blocks both float to the right, and including a clear:right declaration for these
boxes ensures they will stack one above the other in a tidy column roughly one third the width of the page.
We'll also give them a minimum width to prevent the blocks from being squeezed too tightly in narrow
#logo {
width: 50%;
float: left;
#store-info {
width: 32%;
min-width: 260px;
float: right;
clear: right;
#utilities {
width: 32%;
min-width: 260px;
float: right;
clear: right;
Of course, we'll have to clear these floats to prevent the masthead from collapsing and other content from
flowing upwards, around and between the columns. Any one of the clearing methods we covered in
Chapter 9 might be useful here, but let's not overlook the simplest clearing method of all: an element that
can clear the floats above it. Our masthead ends with a navigation bar that will span the width of the page,
so we can use that element itself as a clearing element for the entire masthead:
#nav-main {
clear: both;
At this point we only have a very rough layout with the logo on the left and the rest of the masthead
content on the right. It's not exactly pretty just yet, as you can see in Figure 10-6, but it's progress. We'll
need to give these blocks a little more individual attention to make them look better.
Search WWH ::

Custom Search