ansaurus

Question

When should overflow:hidden be used for a <div>?

Answer 1

+1 A:

Hi, Mom does not get any background because the background comes from the a div, which is height 0 (or near 0). The inner divs are actually overflowing its bounds (which is what floats do by default).

The thing to remember with floats is that they don't have inherent height (when it comes to layout and determining the parent's height). Inline content simply flows around them. So without overflow: hidden the parent div has no height. No height means no background. The floats are still rendered but they go beyond the bounds of the parent div ie the content in the floats is outside the parent div.

cletus 2010-01-29 23:51:58

Answer 2

A:

Floated elements don't occupy any vertical space for clearing, there are a few ways to fix this, something like:

<div class="a">
  <div class="floated-left">Hi,</div>
  <div class="floated-left">Mom!</div>
  <br style="clear: left;" />
</div>

Would clear after, and make the outer div have a vertical height. Set a border: solid 1px red; on .a to see this in action.

Alternative CSS only solution:

.a:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

Nick Craver 2010-01-29 23:52:09

I honestly don't know why anyone would ever use that clearfix solution (last). It's less supported than `overflow: hidden` and is far more obscure.

cletus 2010-01-29 23:56:24

@cletus: It's supported in every current browser, and less markup...just a matter of what your audience is and which (html/css) you're more comfortable with.

Nick Craver 2010-01-29 23:58:44

@cletus: Actually some version of it is used in both blueprint and 960gs. Although i think they are moving to the solution he stumbled upon.

prodigitalson 2010-01-29 23:59:49

@Nick: how is it less markup than `overflow: hidden` on the parent?

cletus 2010-01-30 00:07:30

@cletus: I meant less markup than any html...but `overflow:hidden` doesn't always work, in some scenarios you'll get scrollbars if the children are large enough...depends on the situation of course but `overlow:hidden` isn't a valid solution 100% of the time (most commonly, if the width overflows).

Nick Craver 2010-01-30 00:11:21

@nick: However in current browsers you can set overflow independently for each axis with overflow-x and overflow-y.

prodigitalson 2010-01-30 00:37:14

Answer 3

+3 A:

When you float elements they are taken out of the document flow. Among other things, this means that they have no impact on the dimensions of the parent element (although its width will determine where the floats are positioned on the horizontal axis). They do however impact positioning of siblings within the container depending on whether those sibling are inline or block level elements and whether they have width or not.

In order to make the height of the floats impact the height of the container you must have an element after them that clears them. However, what you are seeing here is actually a part of the CSS standard that you can use to clear floats without additional, non-semantic markup. The only issue is this behavior can vary slightly in older browsers and their css implementations. This effect is present with both overflow auto and overflow hidden but does not present with overflow visible. In IE < 6 you must have a width set on the containing element for it to work.

prodigitalson 2010-01-29 23:52:42

Answer 4

A:

Per the spec for CSS basic box model:

Margins of a floated box do not collapse with any other margins. Margins of a box with ‘overflow’ other than ‘visible’ do not collapse with its children's margins.

By providing it the "overflow" property explicitly you have allowed the children to fit into this model, thus the b div no longer has bounds attached to its children. If you apply visible or inherit (which the parent of b is visible by default), the bounds return and the children divs define the margins.

http://www.w3.org/TR/css3-box/ (RE: Example X)

Joel Etherton 2010-01-29 23:59:48

ansaurus

tags:

views:

answers:

When should overflow:hidden be used for a <div>?

related questions