HTML and CSS Reference
In-Depth Information
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;
Search WWH ::

Custom Search