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:

enter image description here

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?

score 2 · Accepted Answer · answered Dec 15 '13 at 23:41

2

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.

answered Dec 15 '13 at 23:41

Marc Audet

46,011
11
63
83

Pervez Choudhury · Answer 2 · 2013-12-15T23:57:25.153

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

Why block div not get height auto?

2 Answers2