0

I have 2 questions or rather clarifications I need related to CSS overflow property..It is said that

Boxes with an overflow value other than visible will expand vertically to enclose any floated descendant boxes.

Also regarding margins, it is said that

Margins will never collapse for a box with an overflow value other than visible.

Could you please explain these 2 points with any practical use of the same..It would be great if you could include any example to demonstrate the same.

My demos on this;

http://jsfiddle.net/emeRJ/13/

http://jsfiddle.net/emeRJ/12/

Improve this question
1
  • I have already gone through that link...But it does not have an example demonstrating the point.. Commented Sep 6, 2011 at 10:12

2 Answers 2

Reset to default
1

1) if you have an element that has overflow set to something different than "visible", the height of the element will be expand according to the float elements inside.

check this example: http://jsfiddle.net/emeRJ/3/

since i haven't defined the height for the box, it will be expanded by the floating blocks inside. Only because overflow is not "visible".. So if you set the overflow to visible, the box wont consider the floating elements and the height of the box will be 0 (in the example, if you change the overflow to visible you wont see the gray background)

So there are different behaviors when using overflow, float and height (or width) together. Overflow will tell the browser what to do with the content that can't fit in the box (if you have defined the dimensions of the box), Float will put elements next to each other respecting the dimensions of the parent element, and height and width will delimit the visible area

[ even more complicated ] in the example, when the overflow to visible, you could still force the box to expand if you add a clearer element inside: http://jsfiddle.net/emeRJ/4/

2) for the second, you should really read the link given by @feeela about collapsing margins... =P

Hope this helps

Improve this answer
Sign up to request clarification or add additional context in comments.

5 Comments

Mind blowing answer to say the least...I had a couple of things though...First something which I learnt new (but even find a bit tricky to understand) that if overflow is visible, the box wont consider the floating elements (though there is the "clearer" workaround) Second Do floated elements always respect the dimensions of the parent element ? I mean is there any exception to that rule ? An EXCELLENT ANSWER in any case...You deserve a 1000+ vote on thos one..
to your 2nd question.. float element will "try" to respect the dimensions of the parent (if you set them) jsfiddle.net/emeRJ/5 that's why you need to use overflow to tell the browser what to do when the content is too big for the box
Just one more question before i close this...i see that the practical example of float respecting parent element dimensions is for creating flexible or fluid layouts...Is there some other way by which you think we can implement fluid layouts ? I am referring to a layout similar to matthewjamestaylor.com/demos/ipad-css-layout
hmm i'm not really sure if the example you gave could be considered as fluid layout (im really no expert in that) I taught that fluid layout was referred to using percentages in the dimensions of the elements, so it would adapt to almost any screen resolution without changing the general structure.. anyway the technique involves using percentages and (maybe?) min-height and max-height... that's all I know about that subject =P
No issues at all....It was just an ADDITIONAL question ...You have answered the original question PERFECTLY...So I'll accept the answer ...Thx again..
1

Expanding with Overflow

Boxes with an overflow value other than visible will expand vertically to enclose any floated descendant boxes

This property is useful when clearing floating elements. A common problem is that a floated element doesn't get contained by its parent; using overflow is an easy way to solve this problem.

Take a look at this sample where the p is floated from inside the div - the div doesn't expand to wrap it. If we add overflow:hidden to the div, it expands vertically to contain its child.

Here's the final result on JSBin

Collapsing Margins

Margins will never collapse for a box with an overflow value other than visible.

Let's take a look at the W3C spec for more info (and examples) on collapsing margins:

Certain adjoining margins combine to form a single margin. Those margins are said to “collapse.” Margins are adjoining if there are no nonempty content, padding or border areas or clearance to separate them.

The statement you included in your question means that this behavior can't be used when the overflow is set to hidden, scroll, or auto.

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.