Why block div not get height auto?

Question

Code:

<div class="RightAsideBlock">
    <div class="BlockHeader">TEST HEADER</div>
    <div class="BlockContent ForTags">
        <div class="PopularTags"><a href="" >test</a></div>
        <div class="PopularTags"><a href="" >test</a></div>
        <div class="PopularTags"><a href="" >test</a></div>
        <div class="PopularTags"><a href="" >test</a></div>
        <div class="PopularTags"><a href="" >test</a></div>
        <div class="PopularTags"><a href="" >test</a></div>
        <div class="PopularTags"><a href="" >test</a></div>
        <div class="PopularTags"><a href="" >test</a></div>
    </div>
</div>

Css:

.RightAsideBlock {
    width: 100%;
    margin-bottom: 15px;
    box-shadow: 0.2em 0.2em 2px rgba(122,122,122,0.5);
}

.PopularTags {
    color: #acacac;
    background-color: #ededed;
    border: 0px;
    border: 1px solid #acacac;
    padding: 4px 5px;
    float: left;
    margin: 0 5px 5px 0;
    font-size: 12px;
}

In result we have:

Tell me please why div.ForTags not get height auto and divs div.PopularTags move beyond the block boundary div.ForTags ?

And how make right?

Answer 1

You need to add the following rule

.ForTags { overflow: auto }

to create a block formatting context for the parent block that contains the floating elements.

Answer 2

The PopularTags are floated which means they do not count as content for the containing element when calculating it's height. You will need to add an element after the floated elements with a style of clear: both; which will fix it.

Additional HTML after the last PopularTags element

<div class="clearfix"></div>

Additional CSS

.clearfix { clear: both; }

More information about clearing floats and other solutions can be found here: http://www.quirksmode.org/css/clearing.html