DIV "вываливается" за пределы родительског DIV

[TrueTrue]

есть

CSS

#container {border:1px solid red;}

#body {width: 1024px; 
       margin: 0px auto; 
       position: relative; 
       border:8px solid red;
}

#header {width: 1024px; 
         height: 231px; 
         background-image: 
         url(img/header.jpg);	
         border:1px solid red;
}

#post {width: 724px; 
       height: 231px; 
       float: right; 
       border: 1px solid red;
}

HTML

<div id="container">
    <div id="body">
        <div id="header">
        </div>
        <div id="post">
        </div>
    </div>
</div>

DIV - container - по размеру сайта

DIV - Body центрируется и в него помещается "Голова" и "посты" сайта

DIV body, я не задаю высоты, она должна изменятся автоматически с изменением содержимого.

Div-post Должен находиться внутри DIV-body, расстягивая его, строго прилеплен к правой стороне.

DiV - Post как и Div-Header находятся внутри Div-Body И как мне кажется должны растягивать DIV body по высоте,

Но почему-то этого не происходит. DIV-Post становиться по правому краю, но выходит за пределы DIV -Body и контейнера

если не использовать float: ТО пост становиться как нужно, внутрь, но по левому краю.

Подскажите, почему float выбрасывает DIV во вне? И как это исправить?

Edited March 2, 2012 by TrueTrue

[Zerro76]

Тебе нужно , чтобы #post был внутри #header ?

[Taatshi]

вставьте после дива post еще один див - к примеру,

<div class="clear"></div>

css для clear

.clear{

clear:both; content:""; display:block; height:0; font-size:0; overflow: hidden;

}

это делается для того, чтобы внутренние дивы растягивали внешний по своему содержимому.

Edited March 2, 2012 by Taatshi

[alexandr_v-vich]

Либо самому body проставте float и отпозиционируйте

[TrueTrue]

Zerro76 - нет, #post и #header на равных правах в #body

  On 3/2/2012 at 3:42 PM, Taatshi said:

вставьте после дива post еще один див - к примеру,

<div class="clear"></div>

css для clear

.clear{

clear:both; content:""; display:block; height:0; font-size:0; overflow: hidden;

}

это делается для того, чтобы внутренние дивы растягивали внешний по своему содержимому.

я конечно так и не понял, почему float такое творит. Но за решение спасибо, получилось то, что нужно