Parent divs not appearing when height:auto

Parent divs not appearing when height:auto

I have two parent divs, contenttop and contentbottom. I've set both to
width:100% and height:auto (I want them to be fluid based on the divs they
contain) In each of those two divs I have two more divs:
#col1, #col2, #col3, #col4
{
position:relative;
width:45.5%;
margin: 0 0 10px 3%;
padding:0;
display:inline;
float:left;
background-color:yellow;
}
Which are set to be fluid also, i.e., set to the size of whatever text in
in them.
The problem I'm having is that the contenttop and contentbottom divs are
not showing unless I set a specific height. The #col divs are behaving
correctly, but the background-color of my content divs don't appear.
What's happening here? And is there a solution?
Here's the full css:
body
{
background-color:aquamarine;
}
p, p.maintextcontent, h1, h2, h3, h4, h5, h6
{
margin:0;
padding:0;
}
#contenttop
{
position:relative;
width:100%;
height:auto;
background-color:brown;
margin:0;
padding:0;
}
#col1, #col2
{
position:relative;
width:45.5%;
margin: 0 0 10px 3%;
padding:0;
display:inline;
float:left;
background-color:yellow;
}
#contentbottom
{
clear:both;
position:relative;
width:100%;
height:auto;
background-color:#000000;
margin:0;
padding:0;
}
#col3, #col4
{
position:relative;
width:45.5%;
margin: 0 0 10px 3%;
padding:0;
display:inline;
float:left;
background-color:yellow;
}
Thanks