When I set the height of #container to auto, the background-color does not display. However, when I set it to a fixed height like 1000px, it shows up. I've attempted using "overflow:auto", but that did not solve the issue. How can I fix this? I want #container to expand vertically based on its content and still have its background color visible. Any suggestions would be greatly appreciated!
Below is the HTML code snippet:
<div id="container">
<div id="main">
<div id="div1">text text text text text text text text text text text texttexttext text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</div>
<div id="div2">text text text text text text text text text text text texttexttext</div>
<div class="clear"></div>
</div><!--end of main-->
</div><!--end of container-->
And here is the corresponding CSS code:
#container {
background-color: rgb(255, 102, 204);
height: auto;
width: 1200px;
position: absolute;
}
#container #main {
background-color: rgb(204, 51, 0);
height: auto;
width: 900px;
position: absolute;
overflow: auto;
}
#container #main #div1 {
background-color: rgb(0, 204, 255);
float: left;
width: 300px;
padding: 5px;
height: auto;
margin: 20px;
}
#container #main #div2 {
background-color: rgb(0, 153, 153);
height: auto;
width: 400px;
float: left;
margin: 10px;
}
.clear {
clear: both;
}