Back
Page Layout > Understanding the Box Model

Understanding the Box Model

It's no coincide that the float property is located under the "Box" category of the Style Definition window (Figure 01). To fully understand CSS layouts and how to make the most of using floats, you also need to understand the other CSS properties located within this category: width, height, padding, margin, and clear.

  • Width and height. You can specify the width and height for any styled object using these properties. If you want a paragraph to be 100 pixels wide, create a class style with the Width property set to 100 pixels, and then apply it to the paragraph. You'll often use the Width property in conjunction with the Float property (see the following paragraph) to do things like create a box with a set width that floats to either the left or right side of the page—a common format for pull-quotes, message boxes, and sidebars.

    Figure 01. Use the Box category to define the dimensions of a style, to position an object on the page, and to add space between the styled object and other objects around it.

    Be careful with the height property. Many designers turn to this property to provide precise control over page elements. Unfortunately, height is tricky to control. If you've set a specific height for a sidebar that contains text, and you later add more text, you can end up with text spilling outside the sidebar—this can also happen if a visitor increases the text size in his browser. Because Internet Explorer 6 (and earlier versions) handles these instructions differently than other browsers, you can end up with inconsistent and strange results in different browsers. In other words, set the height of an object only if you're sure the content inside will never get taller.

  • Float. If you want to move an object to the left or right side of a page and have other content wrap around it, use the Float property. Of course, that's been most of the point of this chapter, so you probably understand this property by now. However, there's one important point to keep in mind: Floating an object doesn't necessarily move it to the side of the page or the browser window. A floated object merely goes to the left or right edge of what's called its "containing block." If you float a div to the left of the page to create a sidebar, and then insert an image into the sidebar and float that image right, the image goes to the right edge of the sidebar, not the right edge of the page. In addition, if you float multiple elements, they can often end up sitting beside each other—this technique is used to create four-column layouts, where each column is floated next to the other.

  • Clear. Clear prevents an element from wrapping around any object with a right or left Float property. This property can come in handy when you want to force an element to appear below a floated object instead of wrapping around it. The classic example with float layouts is a page's footer (the area at the bottom of the page usually containing contact information and a copyright notice). If a page has a particularly long left-floated sidebar, the footer can move up the page and wrap around the sidebar. In this case, the bottom of the sidebar is at the bottom of the page, and the footer is somewhere in the middle. To fix this problem, simply create a style for the footer that includes a value of both for the clear property. This style forces the footer to drop below both left-floated and right-floated elements. (If you merely want something to drop below a left-floated element, but still wrap around anything floated right, choose the left option; to clear a right-floated element, choose right.) In other words, if you ever see page content appear next to a floated element instead of underneath it, use the clear property on that content to make it go beneath the float.

  • Padding. Padding is the gap that separates the content of the styled tag—such as a paragraph of text or an image—and its border. If you put a 1-pixel border around an image and want to add 10 pixels of space between the image and the border, type 10 into the top padding box, and then choose "pixels" from the pop-up menu. Turn off the "Same for all" box if you wish to set the padding around each edge separately; then, type values into each of the four boxes.

    Warning: Unfortunately, Internet Explorer 5 for Windows doesn't handle the "Box" model correctly. If you set the padding or borders of a style, Internet Explorer displays the element smaller than other browsers, ruining your Web page's layout. Although IE 5 isn't that popular anymore (thank goodness), you can find more information on this problem and a clever workaround. Visit http://css-discuss.incutio.com/?page=BoxModelHack.

  • Margin. The margin is the outermost space surrounding an element (Figure 02). It surrounds the border and padding properties of the style, and lets you add space between elements. Use any of the values—pixels, percentages, and so on—that CSS supports.

Padding, margins, borders, and the content inside the styled tag make up what's called the CSS Box Model, as described in Figure 02. Margins and padding are invisible. They also have similar effects: 5 pixels of left padding adds 5 pixels of space to the left edge of a style; the same happens when you add a 5-pixel left margin. Most people use margins to put space between elements (for example, between the right edge of one column and left edge of an adjacent column), and padding to put space between an element's border and its content (like moving text within a column away from a borderline surrounding the column). Because you can't see padding or margins (just the empty space they make), it's often difficult to know if the gap between, say, the banner at the top of your page and the main area of content is caused by the style applied to the banner or the main area. You also can't always tell if any extra space is caused by a padding or a margin setting. Dreamweaver includes a helpful diagnostic tool (see Figure 03) that lets you clearly see these invisible properties.

When you select a <div> tag that has margin or padding properties set, Dreamweaver draws a box around that div, and adds slanting lines to indicate the space occupied by margins and padding (Figure 03 shows this box and lines in action).

Figure 02. In the CSS Box Model, every style is composed of multiple boxes, one inside the other. Each box controls certain display properties of the style. The outermost box of a style is called the margin. It controls the space between the border of the style and any other objects around the styled object, such as images, paragraphs, or tables; padding is the space between the border and the content itself (the innermost box). The area within the border, which includes the content and padding, may also have a background color. Actually, the background color is drawn underneath the border, so if you assign a dashed or dotted border, the background color appears in the gaps between the dots or dashes.


Margins appear outside padding, and are represented by lines that slant downward from left to right; padding appears inside the margin, and is represented by lines that go upward from left to right. In Figure 03, the area that contains the main story is enclosed in a <div> tag with an ID style named mainContent applied to it. When that div is selected (the tag selector in the lower-left corner of the document window is great for this), Dreamweaver highlights the margins and padding values that are defined in that ID style. As you can see, there's a considerable amount of margin on both the left and rights edges, and a smaller amount of padding (20 pixels) applied to both the left and right edges.