I can’t seem to auto-grow my parent div
’s height based on its floating child div
s. 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 div
s). There is also a second div
below the parent div
that needs to be pushed down, so that it is below the floating div
s.
It’s of major importance that the solution works in IE.
Use the offsetHeight and offsetWidth properties to get the height and width of the element.
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.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With