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.
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
Hageland 04.sep.2005
last rev: 04.sep.2007
investigating 'hasLayout'...