Page Layout with CSS - HTML5 with CSS3 - page 295

to navigate. They can also be difficult to maintain and modify when you want to alter your layout during the
next redesign—and pretty much every website will be redesigned eventually, you can count on it.
Thankfully you have the power of CSS at your fingertips. It's a language specifically designed for
describing the presentation of content, and much more suited to arranging elements on the page. But even
as powerful as CSS is, it still isn't really ideal for describing page layout, at least in its current state.
Something you can easily draw on paper or in Photoshop can be a real challenge to achieve in a browser
using clean markup and CSS, and the more complex the design the more challenging it can be. If you're
just starting out it's going to take some time to learn all the ins and outs and tricks of the trade.
We can't possibly cover every nuanced facet of laying out a complex design with CSS in this one chapter,
or even in one book. As with so many aspects of computing and web development, designing with CSS is
something you'll pick up gradually through reading other topics and tutorials, or from attending classes and
lectures. Most importantly, you'll learn a lot through practice and experimentation. This chapter will help to
set you on the right path.
The Box Model
Every rendered element on a web page resides in a rectangular box, whether you can see it or not. The
box in turn has a number of associated properties in CSS, all of which are described in the box model —the
formatting rules for how browsers should draw these boxes and how they interact with other boxes on the
page. Laying out a page with CSS is essentially an exercise in arranging boxes, so it's worth taking a little
time to understand the box itself. You can see a diagram of the CSS box model in Figure 9-1.
Figure 9-1. The parts of the CSS box model
Block-level elements (those styled with display:block in either a browser's default style sheet or in your
own) form boxes that expand horizontally to the width of their parent box and vertically to the height of their
contents. Working from the inside out, padding is the transparent space between a box's content area and
its edge, and any background colors or images will fill the padding space as well. The border is a
decorated line drawn around the outer edge of the padding space (or around the content area if there is no