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 - th开发者_StackOverflow社区en 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

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.

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.

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;
    ...
}