Html - div blocks and clear:both

Question

I have a big block, here is it's css:

#content_part1
{
    margin: 0; padding: 0;
    width: 1024px;
    min-height: 544px;
    background-image: url(../images/top.gif);
    border: 1px solid green;
}

And another block in it:

#content
{
   width: 942px;
   margin-left: 41px;
   position: absolute;
   margin-top: 5px;
   padding: 0;
   height: 100%;
   clear: both;
   border: 1px solid red;
}

<div id="content_part1">
   <div id="content"></div>
</div>

When content-block changes height, content_part1 does not. Why?

Here is example site: deleted

Answer 1

I believe it's because of your position: absolute in #content. There's a better explanation than I can provide here .

Answer 2

It is absolutely positioned and therefore not part of normal flow. As it isn't part of normal flow, it is ignored when calculating the dimensions of other elements.