CSS: make divs auto adjust automatically to different heights on the container div

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>

<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>

keyword: auto-height

Leave a comment

Your email address will not be published. Required fields are marked *