Understanding Floats

[Trihedralguy]

I have some CSS markup that I did (I'm new to CSS) - I have a layout that has a header, a navigation menu, then a content area. My navigation area is screwing everything up though. There are spaces in-between the images sometimes depending what float i use

#Header {
background-image:url(images/Header.gif);
width:800px;
height:84px;
}

#mid-nav {
float: left;
clear: right;
background-image:url(images/mid_nav.gif);
width:400px;
height:30px;
}
#Schnuck-Markets-Link {
float: left;
clear: right;
}

#EFS-Homepage-Link {
float: left;
clear: right;

}

#Inventory-Search-Link {
float: left;
clear: right;

}

#index-06 {
float: left;
clear: right;
background-image:url(images/index_06.gif);
width:24px;
height:30px;
}

#Content {
float: left;
clear: right;
background-image:url(images/Content.gif);
width:800px;
height:525px;
}

So basically my elements are setup like this:

[Header]
[Menu][1][2][3]
[Content]
[Footer]

But since I dont understand what floats actually do I get something like this:

[Header][1][2][3] [Content]


[Footer]

END

Please help I dont understand what I'm doing wrong.

[Excavator]

Give us the entire code, CSS is not much good without seeing the markup. A link would even be better, that way we can use your images too.

Or, if you want to work on it yourself, have a look at this tutorial that explains floats. (http://css.maxdesign.com.au/floatutorial/)

[twodayslate]

Check this out.
http://bonrouge.com/3c-hf-fluid-lc.php