css float layout help

[sharkey]

hey guys im not sure where im going wrong with my normal floats, the footer seems to be coming up left.

ive attached my style sheet, ohh and if anyone can figure out my ongoing jquery problem where the links dont work id be extremely grateful.

forgot how to do even simple css these days ahh back to the drawing board, best way i learn is forums though so here i am.

anyway the site is http://www.juicingforum.co.uk

and the style sheet is here as it wouldnt let me attach:
body {
background-color:white;
padding:0;
margin:0;
}

p {
color:#6d6d6b;
font: 0.8em verdana, lucida, sans-serif;

}

a img {border:none;}

#sprout a {background:url('images/sprout.gif') #fff;}
#sprout a:hover {
background:url('images/sprouthover.gif') #000;
}

.header {
color:#cd6412;
padding:0;
margin:0;
font:verdana, lucida, sans-serif;
}

.headera {
color:#cd6412;
padding:0;
margin-top:10px;
font:verdana, lucida, sans-serif;
}


.headerq {
color:#cd6412;
padding:0;
margin-bottom:10px;
font:verdana, lucida, sans-serif;
}

#container {
width:800px;
height:500px;
background:#fff;
margin:0 auto;
}

#bar {
width:800px;
height:20px;
background:#fff;
border-bottom:1px solid #7abe78;
}

#banner {
width:800px;
height:100px;
background:url('images/banner.jpg') no-repeat #fff;
border-bottom:1px solid #7abe78;

}

#minicontain {
height:55px;
background:#fff;
float:right;
padding-top:25px;
}

#banimage {
width:800px;
height:100px;
background:#7abe78;
border-top:2px solid #FFF;
border-bottom:2px solid #FFF;
}


#contentcontain {
width:800px;
background:#fff;
border-top:1px solid #7abe78;
border-bottom:1px solid #7abe78;
}

#leftbar {
width:199px;
height:350px;
background:#fff;
border-right:1px solid #fff;
float:left;
}

#minleftbar {
width:197px;
height:240px;
background:url('images/backgmenu.gif') #fff;
margin-top:10px;
}


#headmenu {
width:197px;
height:56px;
background:url('images/headmenu.gif') #fff;
}

#botmenu {
width:197px;
height:71px;
background:url('images/botmenu.gif') #fff;
text-align:center;
}

#content {
width:590px;
background:#fff;
float:right;
text-align:left;
padding:10px 5px 0 5px;
}

#footer {
width:800px;
height:30px;
background:green;
float:none;
}

.lavaLampWithImage {
position: relative;
height: 29px;
width: 421px;
background: url("bg.gif") no-repeat top;
padding: 15px;
margin: 0px 0;
overflow: hidden;
}
.lavaLampWithImage li {
float: left;
list-style: none;
}
.lavaLampWithImage li.back {
background: url("lava.gif") no-repeat right -30px;
width: 9px; height: 30px;
z-index: 8;
position: absolute;
}
.lavaLampWithImage li.back .left {
background: url("lava.gif") no-repeat top left;
height: 30px;
margin-right: 7px; /* 7px is the width of the rounded shape */
}
.lavaLampWithImage li a {
font: bold 14px arial;
text-decoration: none;
color: #fff;
outline: none;
text-align: center;
top: 7px;
text-transform: uppercase;
letter-spacing: 0;
z-index: 10;
display: block;
float: left;
height: 30px;
position: relative;
overflow: hidden;
margin: auto 10px;
}
.lavaLampWithImage li a:hover, .lavaLampWithImage li a:active, .lavaLampWithImage li a:visited {
border: none;
}


anyhelp is appreciated as always:).

[Coyotelab]

#footer {
width:800px;
height:30px;
background:green;
float:left;
}

[criterion9]

#footer{
width:800px;
height:30px;
background:green;
clear:both;
}

[sharkey]

#footer{
width:800px;
height:30px;
background:green;
clear:both;
}


ahh spot on, it was clear:both i had forgetten.

Time to rebuff css again.

cheers :)