parent div does not grow in height

css html height parent children
samoyed picture samoyed · Jan 23, 2011 · Viewed 23.7k times · Source

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

slikts picture slikts · Jan 23, 2011

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.

Related questions

Make div (height) occupy parent remaining height

http://jsfiddle.net/S8g4E/ I have a container div with two children. The first child has a given height. How can I make the second child to occupy the "free space" of the container div without giving a …

Read More
How to make a div 100% height of the browser window

I have a layout with two columns - a left div and a right div. The right div has a grey background-color, and I need it to expand vertically depending on the height of the user's browser window. Right now …

Read More
Make body have 100% of the browser height

I want to make body have 100% of the browser height. Can I do that using CSS? I tried setting height: 100%, but it doesn't work. I want to set a background color for a page to fill the entire browser window, …

Read More