investigating 'hasLayout'...

...reverse engineering #4...

containing floats with 'overflow: hidden|auto'…

Container-divs don't expand to contain floats by default. However, they do expand as we like them to in IE/win, when 'hasLayout = true'. The use of 'overflow: hidden|auto' has gained some popularity, but is it really that easy?

Well, if we just want a container to expand to contain floats, then the answer is; yes — maybe. If we got more on our minds, then the answer is; maybe — maybe not.

Tight control of margins and paddings necessary.

1: 'hasLayout'…

Floating image is contained in IE/win only.

testing…

This is a misplaced paragraph that has ended up here by accident. It is preceded by a heading that is floated left and pulled up over the edge of the container by a negative margin-top. Following this paragraph is an even more misplaced image that is floated right for the sake of demonstration.

test-image
working in:
  • IE6: fine
  • IE7: fine
.container {
height: 1%;
}

2: 'hasLayout' & 'overflow: hidden'…

Floating image is contained in standard-compliant browsers.

testing…

This is a misplaced paragraph that has ended up here by accident. It is preceded by a heading that is floated left and pulled up over the edge of the container by a negative margin-top. Following this paragraph is an even more misplaced image that is floated right for the sake of demonstration.

working in:
  • IE6: OK
  • Opera 8: OK
  • Opera 9: OK
  • Firefox 1.0: OK
  • Safari 1.2.4: OK
  • iCab: OK
  • IE7: usable but NOT OK - 'hidden' doesn't hide
.container {
overflow: hidden;
}
* html .container {
height: 0;
overflow: visible;
}

See: case-related test / example.

Note: the code is modified to avoid collapse in IE5.0/win.

3: 'hasLayout' & 'overflow: auto'…

Floating image is contained in standard-compliant browsers.

testing…

This is a misplaced paragraph that has ended up here by accident. It is preceded by a heading that is floated left and pulled up over the edge of the container by a negative margin-top. Following this paragraph is an even more misplaced image that is floated right for the sake of demonstration.

working in:
  • IE6: OK
  • Opera 8: OK
  • Opera 9: OK
  • Firefox 1.0: buggy
  • Firefox 1.5RC2: OK
  • Safari 1.2.4: OK
  • iCab: buggy
  • IE7: usable but NOT OK - 'auto' doesn't hide
.container {
overflow: auto;
}
* html .container {
height: 0;
}

Note: IE5.0/win is supposed to collapse.

conclusion…

Containing floats with 'overflow: hidden|auto' may work well for very simple designs. Must be a lot of those simple designs around since this method has become so popular.

Containing floats with 'overflow: hidden' is most stable. Buggy browsers makes the use of 'overflow: auto' less than appealing.

All browsers will of course clip the heading at the edge of the test-container in the examples above. Nothing wrong in that since that's what we have told them to do. However, as the examples show; it puts narrow limits on our design-options.
IE7 does not clip the heading in the examples, and that is wrong behavior.

Since my own designs often use 'over-the-edge' elements and other "extras", and still don't run into these limitations, it should be more than obvious that I don't use 'overflow: hidden|auto' much for containing floats. It is a valid option though.

sincerely  georg; sign

Hageland 04.sep.2005
last rev: 04.sep.2007

investigating 'hasLayout'...

additions:

'hasLayout':
an internal flag in Internet Explorer for windows.
- 'hasLyout = false': 'Layout' not applied.
- 'hasLyout = true': 'Layout' applied.

IE6 is in quirks mode.
IE7 is in standard mode.

IE/Mac is excluded from these examples, and will render them buggy or not at all.

external resources

examples…
…2005 - 2007