Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Grow height of parent div that contains floating nested divs

Tags:

html

css

styles

I can’t seem to auto-grow my parent div’s height based on its floating child divs. All the children are floating, to take up space horizontally, and then wrapping to the next line. There can be a changing number of floating children, and the parent has to auto-size its height. (The parent div serves as a background for all the floating divs). There is also a second div below the parent div that needs to be pushed down, so that it is below the floating divs.

It’s of major importance that the solution works in IE.

like image 223
Louis van Tonder Avatar asked Feb 27 '12 09:02

Louis van Tonder


People also ask

How do you find the height of a parent element?

Use the offsetHeight and offsetWidth properties to get the height and width of the element.

Can Div have height?

This seems like the ideal candidate for transition from a table-based layout to a CSS layout. It makes sense: both DIVs and tables can be nested, have HEIGHT and WIDTH attributes set, contain borders, etc.


1 Answers

If the parent container only has floating children, it will have no height. Adding the following CSS to the parent container should help:

.parent {     overflow:hidden;     width: 100%; } 

Read this article for more: http://www.quirksmode.org/css/clearing.html.

like image 112
sandeep Avatar answered Oct 15 '22 03:10

sandeep