parent div does not grow in height

Question

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

Answer 1

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.

Answer 2

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.