Basically you put a clear:both at the bottom of the floated elements, to pull the height of the container div down:
<html>
<head>
<style type=”text/css” media=”screen”>
#container {
background-color:#CCCC99;
width:50%;
}
</style>
</head>
<body>
<div id=”container”>
<div id=”left” style=”float:left;background-color:#CCCCCC; width: 40px;”>Too much content it goes off the background of the container div, how do I fix this? Too much content it goes off the background of the container div, how do I fix this?Too much content it goes off the background of the container div, how do I fix this?Too much content it goes off the background of the container div, how do I fix this?Too much content it goes off the background of the container div, how do I fix this?Too much content it goes off the background of the container div, how do I fix this?Too much content it goes off the background of the container div, how do I fix this?Too much content it goes off the background of the container div, how do I fix this?Too much content it goes off the background of the container div, how do I fix this?</div>
<div id=”right” style=”float:right;background-color:#DDDDDD;”>THis is right floated div</div>
<div style=”clear:both”>This will make the size of container ok, no matter what is the content size of the floating divs</div>
</div>
</body>
</html>