Высота 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 к #blog к "очистить поплавок" .

(или overflow: auto, но прошлый опыт научил меня больше голосов идти в hidden)

Answer 2

Ваши плавающие элементы выходят из контейнера.

Добавьте еще один элемент уровня блока в разметку после "blogcreditsright".

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

css

.clear{
    clear:both;
}