CODEWITHSUNDEEP
htmlcss
Tomasz
Tomasz

Reputation: 2059

div height does not include childrens

I have a problem with my parent div height.

It's not containing children in it.

JSBIN: JSBin

Basic of problem is:

I have code like this:

<div class="itemsContainer">
  <div class="left">
     --SOME STUFF--
  </div>
  <div class="right">
    --SOME STUFF--
  </div>
</div>

And .itemsContainer calculated height does not contains height of children.

Look at JSBin for more code.

Could you please give me a hint, how can i fix that?

Upvotes: 0

Views: 247

Answers (2)

codingrose
codingrose

Reputation: 15699

It is happening because floats are not being cleared.

Solution1:

Clear floats.

HTML:

<div class="itemsContainer">
    <div class="left">
        --SOME STUFF--
    </div>
    <div class="right">
        --SOME STUFF--
    </div>
    <div class="clear"></div>
</div>

CSS:

.clear{clear:both;}

See DEMO.

Solution2:

Add following:

.itemsContainer{overflow:hidden;}

See DEMO.

Upvotes: 2

Suresh Ponnukalai
Suresh Ponnukalai

Reputation: 13988

Clear your float element after the child div complete like below.

<div class="itemsContainer">
<div class="left">
 --SOME STUFF--
</div>
<div class="right">
 --SOME STUFF--
</div>
<div style="clear:both"></div>
</div>

Updated JSBin

Upvotes: 0

Related Questions