Layout Techniques - Jump Start CSS - page 56

Figure 2.12. The logo overlap problem corrected using z-index
Laying out the Footer
The next thing we'll do to our RecipeFinder site in terms of layout is get the contents of our
footer aligned. Our footer is made up of three sections: “Recipes Categories,” “Our Contrib-
utors,” and “Colophon.” Each of these sections is wrapped in its own separate <div> ele-
ment, with its contents in an unordered list ( <ul> ).
We'll again use our handy float property, this time to create a three-column layout:
.footer-1 {
float: left;
width: 422px;
}
.footer-2 {
float: left;
width: 326px;
}
.footer-3 {
float: left;