Code for Bottom Footer

Question

I have a slight problem with making the footer work, as the div's aren't going where I want them to go.

Imagine that the image was at the bottom of the page, at the footer, how would you get the links there? It is going to be spread across the whole of the bottom bit of the page, and I was wondering if you guys could help me out please, as this website that I am making has to look superb.

Here is the code:

@charset "utf-8";
/* CSS Document */

#nav {
font-family:Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", monospace;
width: 600px;
list-style: none;
margin: 0 auto;

}
#nav li {
float: left;
}
#nav li a {
padding: 8px 15px;
text-decoration: none;
color:white;
display:inline-block;
font-size:18px;
}
#nav li a:hover {
color:black;
}
body {
margin: 0;
padding: 0;
}

a {
font-family:Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", monospace;
color:#C7C7C7;
text-decoration:none;
}

a:hover {
font-family:Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", monospace;
color:#009ACD;
text-decoration:none;
}

h1 {
font-family:Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", monospace;
border-style:solid;
border-color:black;
color:white;
width:900px;
left:50%;
right:50%;
margin-top: 0;
font-size:36px;
}

#header {
margin-top: 0;
width:100%;
height:150px;
background-color:#09F;
}

font {
font-family:Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", monospace;
}

Fiddle

Answer 1

#footer .nav li:nth-child(even) {
    top: 70px; /* eg. */
}

or

#footer .nav li:nth-child(2n+0) {
    top: 70px; /* eg. */
}

Don't forget to put

#footer .nav li {
    position: relative;
}

Update

Added some code to justify li elements. See jsfiddle link. And then you can style navigation as you like. link

Full screen view full screen