Styling the content Container


Styling the #content Container

The #content container needs to be set to float: left so that it sits beside the #nav container. You also will need to set a width, which in this case will be 475px.

To create a gutter between the two columns, use margin-left: 45px.

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

Listing 19.9. CSS Code for Styling the #content 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; } #nav ul {     margin: 0;     padding: 0;     list-style-type: none;     text-align: right; } #nav li {     background: url(header-bullet.gif) no-repeat 100% .4em;     padding: 0 10px 5px 0; } #content {     float: left;     width: 475px;     margin-left: 45px;     padding: 15px 0; } 

Figure 19.8. Screenshot of styled #content container.





Sams Teach Yourself CSS in 10 Minutes
Sams Teach Yourself CSS in 10 Minutes
ISBN: 0672327457
EAN: 2147483647
Year: 2005
Pages: 234
Authors: Russ Weakley

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net