A friend of mine came to me to inquire that it would be a good idea to go through and give a tutorial on how to create a oversized multi-column footer. She wanted to know best practice for the code, as well as how to put a form for a newsletter signup. I thought this would be a good idea, but since it involves a lot of code both HTML and CSS, I decided to break it up into multiple posts as to not create a post that was too large.
The design of the footer we will be creating is a simple one that you should be able to modify to your needs. The code is minimal so if you'll need to add more functionality especially to the form to get it to work in your web server. The design is as follows (click on it to view it larger).
To get started we will need some base code to zero out any margins or padding that we have as well as to set a container for ease of use reasons.
* {
margin: 0;
padding: 0;
font-family: arial, sans-serif;
}
#container {
width: 960px;
margin: 0 auto;
}
.clear {
clear: both;
}
The next code is some basic HTML to contain your footer and is making the assumption you already have the base tags for your site (html, head, body) and have linked to an external CSS file.
<div id="container">
<div id="footer">
</div>
</div>
Getting started on the markup
To write semantic code, you need to take what you need to code and think about what kind of information it is. That usually tells you what HTML tag you need to use. In our case it is a list of information that the user needs to view. Going by logic, it tells us that we need to use a unordered list
Your markup will go in the footer div and should be something like this (you'll see why we use the classes in the next post).
<ul>
<li class="columns">
</li>
<li class="columns">
</li>
<li class="columns">
</li>
</ul>
To make them into columns, we need to use floats. Floats shift elements and wrap surrounding elements around it. In this case we are going to make the list items themselves wrap around each other, hence making it appear as a column. The addition of display:inline; is to so solve a bug in IE6 that causes a double margin.
#footer {
width: 960px;
margin-top: 20px;
padding: 10px 0;
border-top: 1px solid #c2c2c2;
}
#footer ul {
list-style: none;
}
#footer ul li.columns {
float: left;
display: inline;
width: 300px;
margin: 10px;
}
Tomorrow we will go into the contents and styling them. If you have any questions so far, post them in the comments section and I will answer them.
Excellent start! I'm happy you decided to take on my challenge! Footers are becoming more and more important in the world of web design and I think what you've started here is an elegant solution to what many businesses are starting to want/need in regards to footer design. Nice start! Can't wait for the next installment.