Putting it All Together
The Body Boundary
We’ve opted for a liquid layout for Power Outfitters rather than a fixed width, meaning the site will
automatically adapt to the width of the visitor’s window, however wide that may be. It won’t be completely
fluid, however; we’ll include min-width and max-width values to impose some constraints on the overall
page width. This necessitates some sort of containing element to bind the page within those constraints.
By default, the body element fills the entire browser window so you could ordinarily apply a background
color or image to the body. With a full-width body element, centering a page within that space requires
some additional element—probably a div—serving no other purpose but to be a presentational container
for the page, defining a box within the wider window.
But we planned ahead, and rather than using the body to carry a full-width background, we applied our
background to the html element. The body element is now free to act as a narrower container, centered
within the browser window by way of the auto value for both the left and right margins. We can add some
padding to the body element to ensure there’s always some space between the content and the window’s
edge, even in narrow windows.
While we’re working on the body element we’ll also define our base font styles for the document (16 pixel
Calibri with a 1.4 proportional line-height) and add a global foreground color for text (#444, a dark gray,
almost but not quite black). You can see our finished style rule for the body element in Listing 10-12.
Without a specified width, the body element defaults to width:auto, allowing the browser to calculate the
width automatically when it renders the page. If the window is wide enough, the max-width and automatic
margins take effect to center the page. The page also won’t become too squished in narrow windows
thanks to the min-width property (very narrow windows will, alas, invoke a horizontal crawl bar, but that’s
better than making the content unreadable).
Listing 10-12. Applying some padding, margins, a minimum width, a maximum width, text color, and base font styles to
the body element
body {
margin: 0 auto;
padding: 0 40px 20px;
min-width: 640px;
max-width: 1160px;
font: 16px/1.4 Calibri, "Trebuchet MS", sans-serif;
color: #444;
}
We’d show you a screen capture of the results so far, but there isn’t much new to see right now because
the body element is just an invisible box. You’ll see how the body manifests soon enough when we begin
styling other content. The width constraints we’ve applied to the body element make it act as a flexible,
invisible fence to corral the page into the middle of the window, and without adding an extra, presentational
div.
Styling the Masthead
The site’s masthead features the Power Outfitter’s logo, the store’s (fictional) address and business hours,
a search form, and a link to the customer’s virtual shopping cart (flip back to Listing 10-5 to see the markup
