This has probably been answered before, but I have spent some time looking and can't find an exact answer.
I have a parent div A that contains two divs B and C.
B and C are both floated left. C has no set height (grows w/ amount of text in it).
The problem: the parent A does not grow to the size of C. I know this has something to do with floating an element not being a part of the normal document flow, but I don't know how to fix it (setting a height on A doesn't help since it depends on the height of C).
The parent div in this example will not expand to contain its floated children - it will appear to have height: 0 .
For all intents and purposes, a floated element does not exist to its parent element. If a parent element has only floated children within it, it will collapse as though it is empty. This is similar to how a parent element behaves when it has an element absolutely positioned within it.
The float CSS property places an element on the left or right side of its container, allowing text and inline elements to wrap around it. The element is removed from the normal flow of the page, though still remaining a part of the flow (in contrast to absolute positioning).
left : floats the element to the left of its container. right : floats the element to the right of its container.
add the property overflow:hidden
to div A
a small div with clear:both after B and C (inside A) should do the trick
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