Parent div does not grow tall

Question

I am having trouble getting a parent div to increase its growth as its children grow (Freud ?: -))

sample page here

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

the structure is a little unusual, because the text should be inside rounded corners, large, so I could not use the usual "fixed top", and then the dynamic middle - fixed bottom, "routine.

of course, terrible pinks and reds just to make the sizes of the children easily visible.

any help would be much appreciated

have a nice day

Answer 1

One of the parent containers for text has a fixed height, and the text floats but is not cleared. Remove the height: 135px (possibly replace with min-height ) from #main_bottom and add the 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 container will match the contents inside.

Answer 3

I met these problems a couple of times. My solution is to add display: block; in the child div and height: auto; in the parent div.

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