I have used this guys guide.

<http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page>

however my footer just sits in the middle of the page and not the full width across the page.

Can anybody help please. 

Here's the CSS.

```
body {
background: url(images/topbg.png) repeat-x;
font-family: Arial, Helvetica, sans-serif;
font-size: 17px;
color:#000;
margin:0;
padding:0;
height:100%;
}

h1 {
font-size:100px;
color:#FFF; 
line-height: 10%;
font-family: 'Exo', sans-serif;
}

h2 {
font-size:100px;
color: #18942f; 
line-height: 80%;
font-family: 'Exo', sans-serif;
}

h3 {
font-size: 20px;    
}

.page-container {

width: 960px;
margin-bottom: auto; 
margin-left: auto; 
margin-right: auto;
min-height:100%;
position:relative;

}

.top-nav ul {
margin: 0;
list-style: none;
line-height: normal;
}

.top-nav li {
margin-left: 220px;
}

.top-nav a {
display: block;
float: left;
height: 38px;
margin-right: 1px;
padding: 4px 30px 0 30px;
text-decoration: none;
font-size: 34px;
font-weight: bold;
font-family: 'Exo', sans-serif;
color: #FFF;
}

.top-nav a:hover {
background:  #272727;
color: #18942f;
}

.top-nav .current_page_item a {
background:  #252525;
color: #FFF;
}

#name {
float: left;
margin-top: 70px;
}

#badge {
float:right;
margin-right: 100px;
margin-top: 10px;

}
.info {
clear: both;
padding-bottom:60px;
}

#about {
height: 250px;
width: 300px;
float:left;
}

#about2 {
width: 860px;   
}

#skills {
height: 250px;
width: 300px;
float: left;
text-align: center; 
}

#contact {
height: 250px;
width: 300px;
float: left;
text-align: right;
}

.about3 {
float:left;
width: 500px;   
}
.picture1 {
margin-left: 560px;
padding-top: 25px;
}
.about4 {
width:450px;

}

.footer {

background: url(images/footer.png)repeat-x;
position:absolute;
bottom:0;
width:100%;
height:60px;
}

.footer-links {
font-family:'Exo', sans-serif;
color: #FFF;
font-size:26px;
padding-top: 50px;
text-align:center   
}

```

And here's the HTML

```
<div class="page-container">
<div class="top-nav"> 
  <ul> 
    <li class="current_page_item"><a href="#">Home</a></li> 
    <li><a href="aboutme.html" class="links">About Me</a></li> 
    <li><a href="skills.html" class="links">Skills</a></li> 
    <li><a href="contact.php" class="links">Contact</a></li> 
  </ul> 
</div>
<div id="name"><h1>My</h1>
  <h2>Name</h2></div>
  <div id="badge"><img src="images/webbadge.png" alt="" width="310" height="310" /></div>
  <div class="info">
  <div id = "about"> </div>
   <div id = "skills"> </div>
  <div id = "contact"></div>

```

```
<div class ="footer">
<div class ="footer-links">

<a href="#" style="color:#FFF">Home </a> -

<a href="#" style="color:#FFF">About</a> -

<a href="#" style="color:#FFF">#</a> -

<a href="#" style="color:#FFF">#</a>
</div>
</div>
</div>

```