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


Tags: css,html

Problem :

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.



Solution :

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>​

    CSS Howto..

    Boostrap 3: how to force the content of layout columns to be of same height?

    Using Bootstrap, how do i achieve this horizontal tab layout? [closed]

    How to create equal height columns in pure CSS [duplicate]

    How can I use an inline style to add a shadow around the used portion of my page?

    How do I properly set width to a percentile and keep a min-width in pixels?

    How to create an HTML CSS Page with Header, Footer and Content

    How to avoid inheriting opacity property in CSS?

    How can I redirect a request file to real folder with htaccess?

    CSS IE7 How can I force UL inside LI to be wider than the parent

    How to change color of footer? (Materialize)

    how to get the cssText of external style?

    How do I use a variable to get CSS info on an element?

    How to do grid of div elements?

    How does this CSS produce a circle?

    bootstrap select show only dropdown-menu on link click without the select button

    How can override a CSS class to that nothing get applied?

    JavaFX - Where is the css file for definition of StageStyle located or how can I change it?

    How to hide the button keeping the position? [duplicate]

    How to make font-size less for 2px than parent element?

    how to link css files in organization github pages

    How to use setInterval

    CSS preprocessors workflow - how does it really work?

    How to customize HTML/CSS tooltips?

    How to hide content that is not wrapped by tag using only CSS?

    How to change my css code to fit the footer to the bottom of the page for any size of monitor?

    How to apply Hovering on html area tag?

    How to make a picture hover over others without moving the other pictures?

    How do I get a computed style?

    how to change CSS on the youtube subscribe widget

    How does one override the JQuery UI styles?