How can the parent div auto resize its height based on the child's height?

Question

How can the parent div auto resize it's height based on the child's height?

div#main{
    width: 970px;
    height: 100px;
    background: rgba(255,0,0,1);
    border: 5px solid rgb(251,151,117);
    margin: 20px 0px 20px 0px; /* Top Right Bottom Left*/
    padding: 10px       
}
div#left{width: 383px;
    height: 100%; 
    margin-right: 5px;
    background: rgb(0,0,255);
    float:left
}
div#description{width: 100%; 
    height: 50%; 
    background: rgb(0,0,0)  
}
div#following{width: 100%; 
    height: 50%; 
    background: rgb(0,255,0)  
}
div#posts{width: 577px;
    height: auto;
    margin-left: 5px;
    background: rgb(255,255,0);
    float: right
}

<div id="main">
    <div id="left" class="cell">

        <div id="description" class="cell">
        </div>

        <div id="following" class="cell">
        </div>

    </div>

    <div id="posts" class="cell"> 
      there are some contents here (height is set to auto)
    </div> 
</div>

Just looking at those scrollbars on the code blocks after editing makes me sick inside. — BoltClock, Mar 28 '11 at 08:05
@Joseph: What's your problem? You posted a ton of code with a title. Descriptions are gold man! — Kyle, Mar 28 '11 at 08:08
Now you reduced it too much, we'd like to see the relevant HTML and CSS. — Kyle, Mar 28 '11 at 08:15
How can the height of the child element (which is set to auto) affect the height of the parent element? Or like inherit? LOL — , Mar 28 '11 at 08:28
look at this for deeper unterstanding: http://stackoverflow.com/questions/211383/which-method-of-clearfix-is-best — Rito, Mar 28 '11 at 10:05

score 8 · Accepted Answer · edited Mar 08 '17 at 21:41

8

I made a very simple example for you to see how variable parent height works.

.parent
{
    height: auto;
    border: 1px dashed #f00;
    padding: 5px;
}

.child
{
    height: 100px;
    border: 1px dashed #0f0;
}

<div class="parent">
    <div class="child">
    </div>
</div>

Follow what is there and you'll do fine.

After looking through your code it's a float problem, you have to add a new div to the bottom with clear: both; to clear the floats and make the #main div appear filled in.

Look at example here.

edited Mar 08 '17 at 21:41

nhahtdh

55,989
15
126
162

answered Mar 28 '11 at 08:27

Kyle

65,599
28
144
152

I know that. What bothers me is that there is , for example based on my question, another DIV like this :
except that the last div is not a div (which has irregular heights so I have set the 2nd div, which contains the irregular-in-height content, to auto)
– Mar 28 '11 at 08:32
Like what? You're being far too vague. – Kyle Mar 28 '11 at 08:34
Both of the links are broken. Would you mind recreating the examples and embed it in the post? – nhahtdh Mar 07 '17 at 20:35

score 1 · Answer 2 · answered Mar 28 '11 at 08:22

1

div#main{
         width: 970px;

         background: rgba(255,0,0,1);
         border: 5px solid rgb(251,151,117);
         margin: 20px 0px 20px 0px; /* Top Right Bottom Left*/
         padding: 10px       
    }

Remove height attribute

answered Mar 28 '11 at 08:22

Vicky

9,515
16
71
88

score 0 · Answer 3 · answered Dec 17 '18 at 19:12

0

CSS3

.container {
    display: inline;
    position: relative;
}

Should fix it. Use inline-block if you want it to be a block with inline.

answered Dec 17 '18 at 19:12

tscpp

1,298
2
12
35

How can the parent div auto resize its height based on the child's height?

3 Answers3