Div高度随位置变小：相对于绝对值

Question

您好Stackoverflow用户......

我有这个网站，我想尝试非常酷。

http://kebax.dk/blog

如您所见，我的问题是“边框”的最后一部分未涵盖最后两个div。

以下是Div的结构：

<div id="blog">
    <div id="bloghead">
        #Blog headline
    </div>
    <div id="blogbody">
        <p>Test tekst!!</p>
        <p>Test tekst!!</p>
        <p>Test tekst!!</p>
        <p>Test tekst!!</p>
        <p>Test tekst!!</p>
        <p>Test tekst!!</p>
    </div>
    <div id="blogcreditsleft">
        Written by: Kristian
    </div>
    <div id="blogcreditsright"><?php echo date("Y-m-d") ?></div>
</div>

这里有CSS背后的CSS（你也可以查看我的样式表）：

    #blog {
        .rounded();
        left:65px;
        position:relative;
        width:520px;
        margin-left:auto;
        margin-right:auto;
        padding:5px;
        background:#052507;
    }

    #bloghead {
        color:#000000;
        background:#2BAC2B;
        padding:5px;
        border-bottom:1px solid #052507;
        font-size:14pt;
    }
    #blogbody {
        color:#000000;
        background:#42E64F;
        padding:5px;
        height:auto;
        overflow:auto;
        min-height:300px;
    }
    #blogcreditsleft, #blogcreditsright {
        color:#000000;
        padding:5px;
        width:250px;
        .gradientVBottomCenter();
    }
    #blogcreditsleft {
        float:left;
    }
    #blogcreditsright {
        float:right;
        text-align:right;
    }

我能让它发挥作用的唯一方法是设置position:absolute并添加left:65px将其推入我的“中心”的中心:) 但后来我的问题是，当添加更多的博客元素时，由于绝对的位置，它们不会只是在彼此之下。

我怀疑这是关于遗失clear:both的事情，但我不知道如何修复它...

有人可以帮忙吗？

修改：

Answer 1

我必须盯着你的网站几乎整整一分钟才能理解你在说什么，我怀疑其他人也在做同样的事情。这个边界非常微妙（容易错过）。

解决此问题的最简单方法是将overflow: hidden添加到#blog至"clear the float"。

（或overflow: auto，但过去的经验告诉我更多的赞成归到hidden）

Answer 2

你的浮动元素正在逃离容器div。

在“blogcreditsright”之后的标记中再添加一个块级元素。

<div class='clear'></div>

CSS

.clear{
    clear:both;
}