I'd like to create a 3 column footer, but whats the easiest way to go about it? As you have footer tag for HTML5, but would it be easier to use divs?

I haven't used much of HTML5 so not entirely sure but I just had a look on some example sites and I'm pretty sure you would have to use divs otherwise how would you get all 3 sections on the same line without float or whatever?

 

Here's an example site, have a look at their source code.

 

http://www.keyzo.co.uk/

 

and here is a link to 55 excellent examples of html5 sites

 

http://webdesignledger.com/inspiration/55-excellent-examples-of-websites-using-html5

I would use unordered list like this:

 

<footer>
<ul>
  <li>Copyright</li>
  <li>Links</li>
  <li>Ect</li>
  <li>Back to top</li>
</ul>
</footer>

 

 

footer ul li { float:left; }

.

If you have fixed width footer just use divs (you can use lists also). No need to worry about htm5, it wil not create columns for you.

 

Step one:

Divide the footer width by three and get the width of your columns.

 

Step two:

Add three divs with that same column width and float them left (no borders, margins, or padding here please).

 

Step four:

Nest another div inside each of the fixed columns. (don't put any width on this one, but you can add padding borders and all your styling here) this way your columns always stay the same width. You will not break the box model.

 

Exemple (you will use css of course):

 

<footer style="width:960px">

<div style="width:320px;float:left"><div style="padding:15px; border:1px solid #999">Column One</div></div>

<div style="width:320px;float:left"><div style="padding:15px; border:1px solid #999">Column Two</div></div>

<div style="width:320px;float:left"><div style="padding:15px; border:1px solid #999">Column Three</div></div>

<div style="clear:both"></div>

</footer>

It would really depend on what you are using the columns for, if it is for links then unordered lists would be the way to go, or you could use divs although you don't need the extra div in comodesig's example, something like this would work just as well:

 

HTML:

 

<footer>
<div>col 1</div>
<div>col 2</div>
<div>col 3</div>
<footer>

 

 

CSS:

footer { width:960px; (other styling you want in the footer here (eg. background colour...) }
footer  div { width:288px; padding:15px; border:1px solid #999; float:left;}

 

The total width would still be 320px but you have taken from the width the 30px padding (15px left + 15px right) and the 2px for the border either side.

Thanks for the tips :-) will give it a go