css - 高度：自动时不出现父div

Question

我有两个父 div，contenttop 和 contentbottom。我已经设置为 width:100% 和 height:auto （我希望它们根据它们包含的 div 是流动的）在这两个 div 中的每一个中，我还有两个 div：

#col1, #col2, #col3, #col4
{
    position:relative;
    width:45.5%;
    margin: 0 0 10px 3%;
    padding:0;
    display:inline;
    float:left;
    background-color:yellow;
}

它们也被设置为流动的，即设置为其中任何文本的大小。

我遇到的问题是 contenttop 和 contentbottom div 没有显示，除非我设置了特定的高度。#col div 的行为正确，但我的内容 div 的背景颜色没有出现。

这里发生了什么事？有没有解决办法？

这是完整的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;
}

谢谢

Answer 1