Adobe Dreamweaver CS5 : Working with Divs and AP Elements - Placing div Tags (part 3)

3.3. CSS Layout Box Model

All CSS block elements are rendered in the browser according to the CSS box model. The box model, established by the W3C CSS standards body, determines how much room a block element actually takes up on the page. The amount of space required for a block element, such as a <div> tag, is a combination of the declared width, plus the padding, border, and margin settings. For example, say a <div>tag has the following style declared:

#myBox {
  width:200px;
  padding:10px;
  border:5px;
  margin:10px;
}

Although nominally, the myBox style appears to be 200 pixels wide, CSS specifications indicate that it will actually take up 250 pixels of space. Here's how the space requirement is figured:

200 pixels content area width
           10 pixels padding-left
           10 pixels padding-right
            5 pixels border-left
            5 pixels border-right
           10 pixels margin-left
           10 pixels margin-right
          250 pixels width total

To make it easy for you to design with the box model in mind, Dreamweaver provides the CSS Layout Box Model visual aid. When enabled, any selected <div> tag or otherwise affected block element depicts all the contributing elements: content area (the width), padding, borders, and margins. Both the padding and margins are shown with colored diagonal lines, although in opposing directions, as shown in Figure 7.

Figure 7. The CSS Layout Box Model visual aid reveals the unseen reserved space around layout elements.

Dreamweaver not only reveals how the layout element is constructed visually, but you'll also receive a wealth of information from tooltips that appear as you move your cursor around the element. The information in the tooltip varies according to cursor's position:

• Hover over the content area to see all the CSS properties, including those related to the box model.

• Move your cursor over the padding or margin areas to see their respective values — for example, Margin: 10px.

• With the cursor over the border, the tooltip reveals the current values for the margin, border, and padding properties.

I recommend turning on the CSS Layout Box Model feature in the fine-tuning and debugging stages of your Web page development; it's a great tool for understanding exactly why elements on your page are positioned the way they are.

3.4. CSS Layout Outlines

CSS Layout Outlines, when enabled, place a border around <div> tags and other block layout elements (see Figure 8). The outline is a dashed style for inserted <div> tags and a solid border for drawn Dreamweaver AP elements.

Figure 8. Highlight your <div> tags at design-time with CSS Layout Outlines.

I tend to keep CSS Layout Outlines enabled during most of my design process; I find having the outlines visible quickly allows me to insert content in just the right places and, more importantly, select the <div> tags for quick refinement.

Applying a CSS Layout In this Technique, you apply previously defined CSS styles to a variety of <div> tags to create a basic layout. From the Techniques site, expand the 10_Divs folder and open div_start.htm. The first style to apply acts as a container for the entire page; to apply this properly, you'll need to position the cursor properly. Place your cursor in the series of links on the page and click the <p> tag in the Tag Selector. From the Insert panel's Layout category, click Insert Div Tag. When the Insert Div Tag dialog box opens, make sure the Insert list is set to Wrap Around Selection. From the ID list, choose Wrapper and click OK. Next, add the first of three <div> tags, the header so that it appears with the wrapper <div> tag: From the Insert panel's Layout category, click Insert Div Tag. From the Insert list, choose After Start Of Tag and then, when the adjacent list appears, select <div id="wrapper">. From the ID list, choose Header and click OK. Click Delete to remove the selected placeholder text. Now you're ready to insert the middle <div> tag after the header <div> tag: From the Insert panel's Layout category, click Insert Div Tag. From the Insert list, choose After Tag and then, when the adjacent list appears, select <div id="header">. From the ID list, choose Middle and click OK. The final <div> wraps around navigation links and forms the bottom area, the footer: Place your cursor in the series of links on the page and click the <p> tag in the Tag Selector. From the Insert panel's Layout category, click Insert Div Tag. When the Insert Div Tag dialog box opens, make sure the Insert list is set to Wrap Around Selection and, from the ID list, choose Footer; click OK when you're done. Save your page. Your new CSS-based layout is now ready to be filled out with content.