CODEWITHSUNDEEP
csshtml
Sumit Dobriyal
Sumit Dobriyal

Reputation: 79

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

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>

Upvotes: 6

Views: 38876

Answers (3)

C-man
C-man

Reputation: 171

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.

Upvotes: 5

Gatekeeper
Gatekeeper

Reputation: 1616

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

Upvotes: 0

Ian Wood
Ian Wood

Reputation: 6573

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

div.parent{ overflow: hidden; }

with NO height specified.

Upvotes: 14

Related Questions