My background-color of my div is not showing

I am having a problem with having my container2 div background-color to show all the way down to my footer. My container2 div contains 2 other div tags. They are
(leftside, and rightside). For some reason my container2 background-color property is not showing. It's nowhere to be found when I view the page. It's like the height of that div is set to 0? What do I need to do to have my container2 background-color show up to the footer of my page? I don't want to specify a height for the div (container2) because it will be a variable height based on the contents of the page.

Below is my html and css info.

Here is my html file:

<div id="container2">
<div id="rightside"><p>This is my right side</p></div>
<div id="leftside"><p>This is my leftside</p></div>
</div>

<div id="footer">This is my footer</div>
</body>

////////////////

Here is some of my css

body {
margin: 0 auto;
width:773px;
background-repeat:repeat-y;
background-color:#00CC00;
}

#container {
background:#CC9900;
height:100px;
width:773px;
position:relative;
border-bottom: 1px solid black;
float:left;
margin-top:10px;
}

#container2 {
clear:both;
border:1px solid black;
background-color:#00FFFF;
}

div.header {
position:absolute;
bottom:0;
width:640px;
color:#CC66CC;
}

#rightside {
float:right;
width:170px;
background:#6B600A;
margin: 2px 0px 0 0;
}

#leftside {
width:585px;
float:left;
margin: 2px 5px 0 0;
border:1px solid black;
}

#footer {
clear:both;
float:right;
font-size:12px;
}

Thanks for any help

My background-color of my div is not showing

Instead the background-color of my body is showing

gms3651

Ingolemo

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week