Float?

[Vernier]

Hey, i'm using this css:

#top {
background: url('images/content-top.gif');
background-repeat: no-repeat;
position: relative;
left: 0%;
top: 0%;
z-index: -1;
float: left;
width: 481px;
height: 22px;
}

#mid  {
background: url('images/content-middle.gif');
background-repeat: repeat-y;
padding: 60px;
float: left;
width: 481px;
margin: 0px;
}

#bot {
background: url('images/content-bottom.gif');
background-repeat: no-repeat;
float: left;
height: 23px;
width: 481px;
margin: 0px;
}

.home {
background: url('images/nav-home.gif');
z-index: 1;
float: right;
width: 129px;
height: 39px;
}

.radio {

}

.extra {

}

.about {

}

However when the "home" image floats right, it leaves a massive gap:



How can I stop this?

Thanks

~ David

[ApacheTech]

Add clear: both; to #top