CODEWITHSUNDEEP
csshtml
JerryCai
JerryCai

Reputation: 1693

How to set parent div height to self adapt to the inner div height?

I have a parent div and 2 sub div as follow:

<div class="parent">
    <div style="height:100px; float:left;" >
        aaa
    </div>
    <div style="height:200px; float:left;">
        bbb
    </div>
</div>​

How to set the "parent" css to adapt to the largest height of inner div? In this case: 200px

PS: Neither height=100% nor height=auto works.

Thanks.

Upvotes: 1

Views: 3192

Answers (4)

Mohan
Mohan

Reputation: 4829

You need to add style="clear:both"

<div class="parent">
       <div style="height:100px; float:left;" >
           asljkdh        
       </div> 
       <div style="height:200px; float:left;">
          bbb 
       </div>
       <div style="clear:both"></div> <!-- Add this Line-->
     </div>​

Upvotes: 0

Jarekczek
Jarekczek

Reputation: 7876

I followed the link given by peterp and would like to quote a method they mention, which worked for me. This method is first on their list and described as simply :)

Make the outer div also float

<div class="parent" style="float:left;">

Upvotes: 1

timkeay
timkeay

Reputation: 104

You can also "overflow:hidden" on the parent element, although you may encounter problems if you want things to break out of that div (e.g. negative margins, box-shadow, etc).

<div class="parent" style="overflow: hidden;">
    <div style="height:100px; float:left;" >
        aaa
    </div>
    <div style="height:200px; float:left;">
        bbb
    </div>
</div>​

Upvotes: 2

peterp
peterp

Reputation: 3121

The parent div does not take the height of its content, because the inner divs are floating. You have to clear the floating, before closing the parent div. Try this:

<div class="parent">
    <div style="height:100px; float:left;" >
        aaa
    </div> 
    <div style="height:200px; float:left;">
        bbb
    </div>
    <div style="clear:both"></div>
</div>​

EDIT: You might want to have a look at this w3c article for in-depth information about floats and clearing: http://www.w3.org/wiki/Floats_and_clearing

Upvotes: 3

Related Questions