How to auto adjust parent DIV height according to the contents in child DIV?

Question

I have one parent DIV inside parent DIV i have two DIV one in left and second is in right side inside the parent DIV i want when i write any content in left or right div tag the parent DIV will be auto adjusted according to the height of left or right DIV tags..

How to write the .css file to perform this ?

the main DIV will not be adjusted according to the child div in Design View :

review my code please :

<div style="padding: 8px; overflow: hidden; background-color: #FFFFFF;">
    <div style ="float:left">
        <p>Hi, Flo!</p>
      </div>
      <div style ="float:right; height: 180px;"> 
        <p>is</p>
        <p>this</p>
        <p>what</p>
        <p>you are looking for?</p>
      </div>
    </div>

One more question - how to add two DIV inside parent DIV one in left side inside the parent and other is on right..????? — Sumit Dobriyal, Apr 11 '12 at 07:51
are you really asking how to make the 2 float divs the same height and make the paren expand to contain them both? — Ian Wood, Apr 11 '12 at 07:57
lan review my code to correct this ... and help me please .. — Sumit Dobriyal, Apr 11 '12 at 08:04
what exactly isn't working there? don't worry about design view in dreamweaver - test it in the browser. — Ian Wood, Apr 11 '12 at 08:50
possible duplicate of [CSS - Expand child DIV height to parent's height](http://stackoverflow.com/questions/4804581/css-expand-child-div-height-to-parents-height) — dynamic, Nov 20 '12 at 23:22

score 14 · Accepted Answer · answered Apr 11 '12 at 07:45

14

if the two child divs are floats then you could use:

div.parent{ overflow: hidden; }

with NO height specified.

answered Apr 11 '12 at 07:45

Ian Wood

6,515
5
34
73

but i want if the content inside left child DIV and right Clid Div increases then the parent DIV height will be auto adjusted.... – Sumit Dobriyal Apr 11 '12 at 07:47
i have set overflow:hidden in parent and what about the left and right DIV inside parent ? – Sumit Dobriyal Apr 11 '12 at 07:47

score 5 · Answer 2 · edited Aug 21 '12 at 19:41

5

div.parent{ 
     display:  inline-block;
     width:    100%;
}

I found this to be a very nice solution. If you had floating children and non floating children, the height will automatically be adjusted to the min amount of space needed. The width is set to 100% to expand to the parent of the parent's width.

edited Aug 21 '12 at 19:41

mguymon

8,946
2
39
61

answered Aug 21 '12 at 18:06

C-man

171
1
3

Very very nice solution. Thank you very much! – MightyMouse Aug 20 '15 at 22:40
Thank you MightyMouse! I didn't think this solution would still be valid 3 years from posting it, but I am sure it was still able to help you. There is probably a more efficient way to do it with flex-box, but this is simple and elegant. It just makes sense. – C-man Aug 21 '15 at 18:06
That might be true, but people who use the usual suspect (IE) may not be able to view what I want them to view if I use flex-box. My point is, that the above solution is, as you say, very simple and elegant. Moreover it is supported by a wider range of browsers. In my current project I want compatibility with as many old browsers as it is possible (including some dated IE versions), so this solutions seems ideal. Thanks again! I wish I could up-vote multiple times! :-) – MightyMouse Aug 22 '15 at 05:41

score 0 · Answer 3 · edited May 23 '17 at 11:58

0

Div size is automatically adjusted by content it holds, unles you specify some floats to inner divs.. If you have floating divs, you can use this solution: similar question

edited May 23 '17 at 11:58

Community

1
1

answered Apr 11 '12 at 07:46

Gatekeeper

1,586
3
21
33

How to auto adjust parent DIV height according to the contents in child DIV?

3 Answers3