Styling the nav Container

Styling the #nav Container

To position the #nav container and #content container beside each other, they will both need to be floated.

To float the #nav container, use float: left. You also will need to set a width, which in this case will be 130px.

Internet Explorer 5 and 5.5 for Windows will sometimes display margins at double the specified width in certain circumstances. This Double Margin Float Bug is explained in Lesson 11, "Positioning an Image and Its Caption." The bug can be fixed by setting the floated item to display: inline. All other browsers will ignore this declaration, but Internet Explorer 5 and 5.5 for Windows will then apply the correct margin width.

Now that the margins will display correctly in all recent browsers, you can apply margin-left: 20px.

Finally, padding needs to be applied to the top and bottom of the container. Here, you will need to use padding: 15px 0 as shown in Listing 19.6. The results can be seen in Figure 19.5.

Listing 19.6. CSS Code for Styling the #nav Container

body {     text-align: center;     background: #B0BFC2;     color: #444; } #container {     text-align: left;     margin: 0 auto;     width: 700px;     background: #FFF url(header-base.gif) repeat-y; } h1 {     background: #D36832;     color: #FFF;     padding: 20px;     margin: 0;     border-bottom: 5px solid #387A9B; } #nav {     float: left;     width: 130px;     display: inline;     margin-left: 20px;     padding: 15px 0; } 

Figure 19.5. Screenshot of styled #nav container.