[Solved] Space between Float Container and Footer.

Hi Guys,

I'm a beaten man, this has been driving me mad for 3 days.

There is a line of whitespace in between the float container which has the clearfix class attached and the footer.

I can't get the footer to go up and be flush with the floatcontainer.

If someone could advise I would be very greatful.

Thanks,
Dave.

CSS and HTML Code Below -

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

#wrapper {
text-align: center;
width: 100%;
margin-right: auto;
margin-left: auto;
margin-top: 0px;
margin-bottom: 0px;
height: 100%;
}
body {
margin-top: 0px;
margin-right: 0px;
margin-left: 0px;
}

#header {
height: 215px;
width: 100%;
text-align: center;
margin-right: auto;
margin-left: auto;
float: none;
background-color: #FF0000;
}
#leftNav {
background-color: #FFFFFF;
float: left;
width: 164px;
margin: 0px;
}
#main {
width: 600px;
margin-left: 8px;
border-right-width: 1px;
border-left-width: 1px;
border-right-style: dotted;
border-left-style: dotted;
border-right-color: #0232FF;
border-left-color: #0232FF;
float: left;
margin-right: 0px;
background-color: #00FF66;
height: 100%;
}
#contentWrapper {
text-align: center;
width: 774px;
margin-right: auto;
margin-left: auto;
margin-top: 0px;
margin-bottom: 0px;
height: 100%;
background-color: #0066CC;
clear: both;
}

#footer {
height: 215px;
width: 100%;
text-align: center;
margin-right: auto;
margin-left: auto;
margin-top: 0px;
clear: both;
background-color: #99CC66;
}

#vertmenu {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 100%;
width: 160px;
padding: 0px;
margin: 0px;
}

#vertmenu ul {
list-style: none;
margin: 0px;
padding: 0px;
border: none;
}
#vertmenu ul li {
margin: 0px;
padding: 0px;
}
#vertmenu ul li a {
font-size: 80%;
display: block;
text-decoration: none;
color: #004BAC;
width:160px;
text-align: left;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #004BAC;
padding-top: 5px;
padding-right: 0px;
padding-bottom: 2px;
padding-left: 4px;
}

#vertmenu ul li a:hover, #vertmenu ul li a:focus {
color: #000000;
background-color: #eeeeee;
}

.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

.clearfix {display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

Untitled Document

****Break Happens Here****