CSS Float overflowing the page container

[theMAD2]

#contents {
	width:700px;
	margin-left:auto;
	margin-right:auto;
	text-align:justify;
	background-image:url(images/contmid.gif);
}

#conttop {
	background-image:url(images/conttop.gif);
	height:15px;
}

#contmid {
	background-image:url(images/contmid.gif);
	background-color:#FFFFFF;
	padding-left:20px;
	padding-right:20px;
	height:auto;
	visibility: visible;
}

#contbot {
	background-image:url(images/contbot.gif);
	height:16px;
	background-color:#FFFFFF;
}

#menu {
	width:135px;
	margin-right:20px;
	margin-bottom:10px;
	float:left;
}

#menutop {
	background-image:url(images/menutop.gif);
	height:10px;
}

#menumid {
	background-image:url(images/menumid.gif);
	height:auto;
	padding:2px;
}

#menubot {
	background-image:url(images/menubot.gif);
	height:22px;
	width:135px;
	clear:left;
}

I've got this CSS for my page layout (there is more, but this is the bit with the problem). The page contents is stored within the contmid div, and the menu contents is in the menumid div. As I add items to the menu the menu expands, but if there isn't enough contents in the contmid div the menu overlaps the container. Is there anyway to get around this without using hacks? Thanks a lot.

 

[theMAD2]

My bad, I put the clear:left; in the menubot instead of the contbot. Seems fine now