CODEWITHSUNDEEP
htmlcss
Max Frai
Max Frai

Reputation: 64276

Html - div blocks and clear:both

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

Upvotes: 0

Views: 600

Answers (2)

Quentin
Quentin

Reputation: 943591

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.

Upvotes: 2

Jonathon Faust
Jonathon Faust

Reputation: 12545

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

Upvotes: 2

Related Questions