Grow height of parent div that contains floating nested divs

html css styles
Louis van Tonder picture Louis van Tonder · Feb 27, 2012 · Viewed 57k times · Source

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.

Answer

sandeep picture sandeep · Feb 27, 2012

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.

Related questions

CSS align images and text on same line

I have been searching and trying different methods for hours now. I just can't seem to get these two images and text all on one line. I want both the images and both text to all be on one line …

Read More
How do I style (css) radio buttons and labels?

Given the code bellow, how do I style the radio buttons to be next to the labels and style the label of the selected radio button differently than the other labels? Also let me state that I use the yui …

Read More
Removing newline after <h1> tags?

I am having a problem with removing linebreaks after the <h1> tag, as everytime it prints, it adds a line break straight after it, so something like <h1>Hello World!</h1> <h2>…

Read More