CODEWITHSUNDEEP
csshtmlheightparentchildren
samoyed
samoyed

Reputation: 879

parent div does not grow in height

I'm having trouble getting a parent div to extend its height as its children grow (Freud? :-))

sample page here

the parent here being "main_bottom" which contains "main_mid" and its children.

the structure is a little unusual because the text has to be within the rounded corners, which are large, so i could not use the usual 'fixed top - then dynamic mid -then fixed bottom' routine.

of course the horrible pink and red are only so that the children divs dimensions are easy to see..

any help will be highly appreciated

have a nice day

Upvotes: 9

Views: 26245

Answers (3)

yujohnnyzhou
yujohnnyzhou

Reputation: 330

I met these problems couple time. My solution is that adding display:block; in child div and height:auto; in parent div. 

div.parent {
    ...
    height: auto;
    ...
}
div.child {
    ...
    display: block;
    ...
}

Upvotes: 0

slikts
slikts

Reputation: 8158

One of the parent containers for the text has a fixed height, and the text is floated but not cleared. Remove the height: 135px (perhaps replace with min-height) rule from #main_bottom and add an overflow: auto rule to #main_mid to clear the float and the layout will work as intended.

Upvotes: 23

Xavier Barbosa
Xavier Barbosa

Reputation: 3947

add these definitions 

#main_bottom {
  min-height: 600px;
  overflow: auto;
}


#main_mid {
  overflow: auto;
  height: auto;
}

with overflow: auto and height: auto the container will fit to the content inside.

Upvotes: 9

Related Questions