The CSS Box Is No Ordinary Box

Combine the almighty <div> element and the CSS box model, and you get an unbeatable duo, like peanut butter and jelly, snow and December, or mashed potatoes and gravy. After you wrap a bunch of content in <div> tags, you have a box with its requisite four parts-content, padding, borders, and margins-ready to accept orders from the CSS styles you create for it.

Understanding the CSS box

We borrow an analogy from Richard Mansfield's CSS Web Design For Dummies (Wiley) to help explain the box concept and how boxes interact with one another. Picture a series of matted and framed pictures hanging on a wall: Each item takes up a certain amount of space on the wall, determined by the four parts of its box. The box content is the space taken up by the piece of art itself, inside the mat window. The mat represents the box's padding, the visual space that separates the content from its frame. The frame represents the box's borders, and the space between each item on the wall comprises the box's margins. Figure 8-1, earlier in this chapter, shows a diagram of the CSS box model and its parts.

Figure 8-9 shows three items in the Expression Web Design view, with the item in the middle selected to show you how Expression Web displays a box's padding and margins. Each item shown in Figure 8-9 is a <div> element with the class attribute "box" (<div class=“box” >; we used a class rather than an ID because there are several boxes, each styled the same).

Figure 8-9: In Design view, select an item to see its box.

CSS layouts to go

If you want to order up a ready-to-use set of <div> elements that are already created and ID-ed, you can start a new page by using one of the CSS layouts that come with Expression Web. Here's how:

1. Choose File New Page.

2. On the Page tab in the New dialog box, click to select CSS Layouts in the first column. Then select a page layout style in the second column.

   The Preview area shows a sketch of the selected layout style, and the description area tells you a little about the layout.

3. Click OK to create a page with the selected layout.

   Expression Web creates a Web page containing <div> elements with a unique id already added for each part (Untitled_x .htm), along with an attached CSS style sheet file (Untitled_ x .css) complete with style rules ready to be filled with properties. (We talk more about external style sheets in Chapter 9.)

4. Save the page file.

   Expression Web prompts you to name the page file and then the CSS file. You can then add content to your heart's content (no pun intended) and style away.

Depending on which layout you choose, some style properties may already be set to position columns and set widths. The Preview area shows you which columns get wider or narrower when the visitor changes the browser (indicated by a double arrow and dotted line) and which columns use fixed widths (indicated by a solid line).

Here's how the elements are set up:

• The <div> element's background is gray (the text color is black). This means that the background color for all content is gray.

• Ten pixels of padding have been added to all sides of the content.

• The borders are 10 pixels wide and black.

• The margins are set to 20 pixels on all sides.

• The content of the left box is the paragraph text "The early bird catches the worm." The content of the middle and right boxes are pictures (a photo JPEG and a GIF image). We specified a width of 100 pixels for the content area of all boxes; the pictures are each 100 pixels wide, so they take up the full content width. We did not set a height so that the box could adjust vertically to accommodate the height of the content. (To display the boxes side by side, we floated them; we talk about float later in this chapter.)

Notice that in the left box you can't distinguish the padding from the content background. That's because the padding background is always the same as the content background. In the middle and right boxes, the padding adds space between the content (the picture) and the borders so that the gray content background color shows up. Margins are always transparent, so the page background color surrounds each object. You can see the margins only if you select the <div> element in Design view, as we did in Figure 8-9.

When figuring out the width that a block-level element takes up on the page (such as the <div> boxes shown in Figure 8-9), you add together these individual width values: margin-left, border-width-left, padding-left, width (the content width), padding-right, border-width-right, and margin-right. In Figure 8-9 the width of each <div> is 180 pixels (margin-left: 20px; border-width-left: 10px; padding-left: 10px; width: 100px; padding-right: 10px; border-width-right: 10px; margin-right: 20px;). When laying out boxes side by side in your page-such as <div> elements displayed side by side (the boxes shown in Figure 8-9)-add the margins, borders, padding, and content of all the elements to figure out their combined width. We show you a fixed-width, two-column layout example later in this chapter. (See the later section "Creating and positioning a page content ‘container’" for more details on fixed versus relative layouts, and see the later section "Using float to create a two-column layout" for the example.)

Warning 

The box model has a couple of quirks. The first one has to do with the way the CSS box works. The second is a browser bug. (Grrrr.)

• If two boxes sit next to each other horizontally on the page (as do the floated boxes shown in Figure 8-9), margins for both boxes are used. If two boxes follow each other vertically on the page, the margins between them collapse, and the larger of the two margins is used to separate the two boxes. Figure 8-10 shows the boxes from Figure 8-9 stacked vertically on the page. In this example, the margin for each box is 20 pixels, so 20 pixels of space appear between the boxes. If one box had a 30-pixel margin and the other had 10 pixels, the margin between them would be 30 pixels, the larger of the two margins.

  
  Figure 8-10: Vertically stacked boxes make margins collapse.

• Microsoft Internet Explorer 5 for Windows incorrectly calculates the box model, by subtracting margins and padding from the content width rather than adding their values to the content width. Internet Explorer 6 and 7, as well as other browsers, get it right.

Setting CSS box properties in Expression Web

In Figure 8-9, we set the border, margin, and padding properties to the same value all the way around the content area. But you can set individual values for each property and each side, which gives you a lot of control when tweaking the individual items on your page.

Measuring up

You may be wondering why so many measurement values are used for setting style properties, and which ones to use. The answer is-it depends. Remember that your Web visitors have a lot of control over how they view your page: They set their computer monitor's resolution and the size of their Web browser's window. They can also change the default text size. When specifying properties values that relate to text, such as font size, line height, line spacing, and even the width and height of content areas that contain text, you should use relative value measurements as much as possible. The most common relative measurements for text and text content areas are

• Percent (%): Increase or decrease size by a percentage value. For example, specifying font-size: 150% means "increase the font size 1½ times." Percentages are also useful for specifying the width of certain areas of the Web page that you want to adjust to the width of the browser window, such as a main content area.

• em: The relative measurement value emis the approximate width of the lowercase letter mof a font. One em is the starting point from which you decrease or increase (.5 em means "decrease by one-half," and 1.5 em means "increase by one-half"); ex, the approximate height of a font's lower-case letter x, is less commonly used.

Use pixels (px) to specify exact width and height. Always use pixels to specify the width and height of images that appear in the content (not as part of the background). Pixels are often used for border widths and for parts of the page that you don't want to change when the browser window is resized (such as a side column for navigation, news, ads, or announcements, for example). If you use pixels for font size, however, the pixel value freezes the text at that size and prevents the Web visitor from changing the text size if necessary.

Other measurement values are used, such as inch (in), pica (pc), point (pt), centimeter (cm), and millimeter (mm), but these should be used only when creating style sheets for printing.

Tip 

CSS box properties (margins, padding, and borders) for each individual side of the CSS box are written in style rules in this order: top, right, bottom, left. Think of it as moving clockwise around the box, starting at the top. For example, the style property margin: 5px 10px 15px 20px; sets the top margin to 5 pixels, the right margin to 10, the bottom to 15, and the left to 20.

In the New Style and Modify Style dialog boxes and in the CSS Properties task pane, use options in these categories to control the CSS box model properties:

• Box: Set width values for padding and margins, either the same for all sides or individually. (Figure 8-11 shows the Box category settings in the Modify Style dialog box.)

  
  Figure 8-11: Set padding and margin properties in the Box category.

• Border: Set the border style (solid or dotted, for example), width, and color, either the same for all sides or individually for each side.

• Background: Set options for the content area's background color. If you place a picture in the content area's background, set options for whether it repeats or scrolls or appears in a specified horizontal or vertical position.

• Position: Set options for the content area's width and height (width and height properties).

Changing margins and padding in Design view

You can adjust the width of margins and padding for each individual side of an element in Design view by dragging with the cursor. Although this method is a bit tedious for changing all four sides of an object (because you have to change each side individually), it's useful for small adjustments and design tweaks. As you drag the cursor, Expression Web tells you which side you're changing and the width, as shown in Figure 8-12. The picture on the left shows you what you see as you change the margins for one of the element's sides; the picture on the right shows padding.

Figure 8-12: Drag a side to change margin and padding width.

This technique works for block-level elements only (paragraphs, lists, <div> elements, headings-anything that forces a line break after it; see Chapter 14 for a quickie list of block and inline elements).

To change a margin width by dragging, follow these steps:

1. In Design view, select the object whose margins you want to change.

   Click the object once, and then click the little tab containing the object's tag in the upper-left corner of the blue box that surrounds it, or click the tag on the Quick Tag Selector bar.

   Pink, diagonal line shading appears around the object, indicating current margins (see Figure 8-12).

2. Hover the cursor over the solid pink horizontal or vertical line corresponding to the side whose margin you want to change and, when the cursor becomes a two-sided arrow, click and drag.

   A box pops up, telling you the margin width as you drag.

3. When the margin is the desired size, release the mouse button.

   This technique is a little tricky at first. If you don't get it right the first time, you can drag again or use the Undo command (Edit Undo or Ctrl+Z) to go back to the original size and start over.

To change the padding width, follow the instructions just given but press and hold down the Shift key while you drag. Padding lines are light blue.

Changing width and height in Design view

You can change the width or height of an element's content area by dragging with the mouse in Design view. You can change either width or height or both at the same time. To do so, follow these steps:

1. Click the element whose content area you want to change.

   A blue line appears around it, and the tag name appears on a little tab in the upper-left corner.

2. Move the cursor over the right or bottom border or the lower-right corner until tiny, rectangular handles appear and the cursor becomes a two-sided arrow.

3. Click and drag, and then release the mouse button when the object is the desired size.

   A box pops up with a message telling you the dimensions as you drag.

   If you want to change both the width and the height while keeping the dimensions in proportion, hold down the Shift key while you drag the lower-right corner's handle.