Writing the Wrapper Selector

As you can deduce from the title of this section, I refer to this div as a wrapper. The function of a wrapper div is to act as container element for all design elements you use within a page. The wrapper also determines where the design is positioned in the body element.

In this example the positioning of the wrapper—and therefore your design—will be positioned in the center of the browser window with a 10-pixel margin at the top and bottom of the window. (If you recall from the earlier parts in this series, you used the auto value on the left and right margins to center the wrapper horizontally in the user’s browser.) Revisit the Creating an ID Selector movie from Part 1 if you are unsure how to set up the margins for the wrapper div.

When you are ready to create your wrapper ID selector, give it the properties and values shown below:

• Background color of #FFFFFF
• All four sides set as a black border with a solid line that is 1 pixel wide
• Width of 770 pixels—so it fits comfortably at 800 pixels wide without scroll bars
• Margin settings of 10 pixels to the top and bottom margins
• Margin settings of auto for the left and right margins

Your rule for the wrapper should look like the code below (remember that the # in #wrapper signifies an ID selector):

#wrapper{
 width: 770px;
 background-color:#FFFFFF;
 margin:10px auto;
 border: 1px solid #000000;
 }

Preview your page in the Firefox browser (see Figure 2).

Figure 2. The wrapper div centered in the Firefox browser window

Notice that the margin is somewhat greater than 10 pixels below the wrapper div. This is because the wrapper collapses around the content. You could use the min-height property if you wished, although support for it is fairly poor at this time. I like the div to collapse around the content.

If you have access to Internet Explorer 5.x for Windows, you may want to test your page in one of those versions (see Figure 3).

Figure 3. The wrapper div in IE 5.01—not exactly what we were hoping for!

As you can see, IE 5.x for Windows has a problem: It does not respect the auto values for the left and right margin. Not to worry, though; this is a simple fix. You can use another bug in IE 5.x to center the wrapper div.

Add the following property and value pair to your body selector:

text-align: center;

Preview the page again (see Figure 4).

Figure 4. The wrapper div in IE 5.01—that is much better!

IE 5.x also applies the text-align: center; property and value incorrectly. It centers the wrapper div, which is wrong but works just fine for your designs needs. Now go back to your wrapper divs rule and add the following property and value pair to realign your text to the left:

text-align: left;

You have completed the set up of your wrapper div. Your CSS file should look like the following:

body{
 background-color:#666666;
 color:#666666;
 font-family:Verdana, Arial, Helvetica, sans-serif;
 margin: 0; 
padding: 0; text-align: center; 
}
  #wrapper{ 
width: 770px; 
background-color:#FFFFFF;
 margin:10px auto;
 border: 1px solid #000000;
 text-align:left;
 }

Time to move on.