CSS Float overflowing the page container

Associate
Joined
2 Aug 2005
Posts
680
Code:
#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.
 
Back
Top Bottom