Question

I’ve stumbled upon some behavior in CSS that is confusing to me. Let’s say there are two block elements, first of them floated to the right (jsfiddle):

If the overflow property is set to hidden on the non-floated element, that element is shrunk in order to accommodate for the floated element width jsfiddle:

I actually don’t have a problem with that, but I would like to know why that is happening. What I do have problem with is the following case in which after the overflow is set to hidden, width of the non-floated element is set to 100%. I tested this in IE9, Firefox 14, Opera 12, Chrome 20 and Safari 5 on Win7, and all of them except Firefox show (jsfiddle):

What I wanted and expected, and what Firefox shows, is the same as in the first picture above. So, can anyone shed some light on why all this is happening?

Answer 1

According to definition “If the container element is itself contained by something else, the floated div will sit on the right margin of the container.”

Case 1: The .container is covering the total space available. The .content is taking all the space except the .float(the .content is not of shape rectangle here), that’s what floating is. Its actually overflowing to cover the space. Its the default behaviour.

Case 2: Now you tell the .content to hide the overflow. So it hides the overflow it was earlier doing as a default behaviour.

Case 3: You tell the .content to take the full width of the parent, i.e. .container, so it ignores the overflow:hidden and just expands to fill the space.

If you are wondering the weird behaviour of overflow:hidden, check this ARTICLE