html - 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（你也可以查看我的样式表）：

    #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" clear the float"。#blog

（或者overflow: auto，但过去的经验教会了我更多的赞成票hidden）

Answer 2

您的浮动元素正在转义容器 div。

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

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

css

.clear{
    clear:both;
}