Styling the #footer ElementThe #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 Elementbody { 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; } |