Приглашаем посетить
Искусство (art.niv.ru)

Styling the #footer Element

Previous Page
Table of Contents
Next Page

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.

Styling the #footer Element


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

Styling the #footer Element

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.



Previous Page
Table of Contents
Next Page