Styling the footer Element


Styling the #footer Element

The #footer must sit under the three floated columns. This is achieved using clear: both;. The background-color and color properties can be applied using background: #387A9B; and color: #fff;.

Next, the #footer element should be padded to provide some space around the content. This is achieved using padding: 5px 3%;.

Finally, the footer content can be aligned to the right using text-align: right; as shown in Listing 21.12. The results can be seen in Figure 21.12.

Figure 21.12. Screenshot of the finished layout.


Listing 21.12. CSS Code for Styling the #footer Element
 body {     margin: 0;     padding: 0;     font: 90% arial, helvetica, sans-serif;     background: #387A9B;     color: #333; } h1 {     background: #D36832;     color: #FFF;     margin: 0;     padding: .5em 3%;     border-bottom: 5px solid #387A9B; } h2, h3 {     margin-top: 0; } #container {     background: url(back01.gif) repeat-y 50% 0; } #container2 {     background: url(back02.gif) repeat-y 80% 0; } #content {     width: 44%;     float: left;     margin: 1em 3%; } #news {     width: 24%;     float: left;     margin: 1em 3%; } #nav {     width: 14%;     float: left;     margin: 1em 0 1em 3%; } #nav ul {     margin: 0;     padding: 0;     list-style-type: none;     line-height: 150%; } #footer {     clear: both;     background: #387A9B;     color: #fff;     padding: 5px 3%;     text-align: right; } 

Collapsing Liquid Layouts

Three-column liquid layouts will generally expand and contract to the width of the browser window.


When a browser window is reduced in width, one or more columns might drop below the first column on the page.

Why does this happen? If there isn't enough horizontal room on the current line for the floated column, it will move down, line by line, until there is room for it.





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