3

The answer to this question is "wrap the input in a span, and apply overflow: hidden to the span."

This works because it establishes a new block formatting context for the span, making room for the floats.

Why does applying overflow: hidden directly to the input not work? Why is it necessary to wrap the input in a span?

Community
  • 1
  • 1
John
  • 29,546
  • 11
  • 78
  • 79

2 Answers2

2

The behavior of block formatting contexts next to floats is not fully specified. From CSS2.1 (emphasis added):

The border box of a table, a block-level replaced element, or an element in the normal flow that establishes a new block formatting context (such as an element with 'overflow' other than 'visible') must not overlap the margin box of any floats in the same block formatting context as the element itself. If necessary, implementations should clear the said element by placing it below any preceding floats, but may place it adjacent to such floats if there is sufficient space. They may even make the border box of said element narrower than defined by section 10.3.3. CSS2 does not define when a UA may put said element next to the float or by how much said element may become narrower.

So the (unsatisfying) answer is effectively "that's just how browsers behave". This means that layouts that rely on the "shrink to fit" behavior -- the effect produced by wrapping the input in a span, in the question's example -- are relying on unspecified browser behavior. From the point of view of the spec, browsers could just as well always clear the block formatting context below the float.

It appears there's been some activity to better specify this corner of CSS for CSS3, but I haven't found anything authoritative.

John
  • 29,546
  • 11
  • 78
  • 79
1

Overflow: hidden applies to the container element, instructing the browser how to manage content that extends beyond the defined limits of the container's borders. By adding overflow: hidden directly to the input you're not really adding anything since the input doesn't have any child elements to affect the positioning or proportions.

Setting overflow doesn't clear the float at the element, it self-clears. This means that the element with overflow applied (auto or hidden), will extend as large as it needs to encompass child elements inside that are floated (instead of collapsing), assuming that the height isn't declared.

Phil.Wheeler
  • 16,748
  • 10
  • 99
  • 155
  • This doesn't sound like the correct answer. Have you looked at http://colinaarts.com/articles/the-magic-of-overflow-hidden/#making-room-for-floats? – John Aug 30 '13 at 00:00