Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Floating left and parent height

Tags:

html

css-float

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).

like image 325
Boris Yeltz Avatar asked Jul 27 '10 16:07

Boris Yeltz


People also ask

What will be height of your parent element when its child has float left?

The parent div in this example will not expand to contain its floated children - it will appear to have height: 0 .

What will happen if a parent element only has floating elements inside?

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.

What is float left?

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).

Is float can be left or right?

left : floats the element to the left of its container. right : floats the element to the right of its container.


2 Answers

add the property overflow:hidden to div A

like image 199
Catfish Avatar answered Oct 10 '22 09:10

Catfish


a small div with clear:both after B and C (inside A) should do the trick

like image 23
second Avatar answered Oct 10 '22 11:10

second