investigating 'hasLayout'...
...reverse engineering #3...
containing floats with 'display: table|table-cell|inline-table'…
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'. How about standard-compliant browsers..?
I'll make use of the slight similarities found between 'hasLayout' in IE win (see: 'on having layout), and the establishment of a 'block formatting context' in standard compliant browsers (see: CSS 2.1 spec - 9.4.1) in the following examples.
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' & 'display: table'…
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:
- Opera 8: buggy
- Opera 9prev1: fine
- Firefox 1.0: fine
- Safari 1.2.4: fine
- iCab: fine
- IE/Mac: excluded
.container { display: table; width: 97% /* approximate value Op & Saf */; padding: 5px 0; /* avoid width-deviation in Moz/FF */ } * html .container { height: 1%; width: auto; } *:first-child+html .container { height: 1%; width: auto; }
See: case-related test / example.
Note: Width is set on this container to avoid “shrink to content-width” which is normal for table-wrappers.
The pretty nonsensical *:first-child+html selector is a hack for targeting IE7. The need for such a hack for the most recent IE/win-version is in itself enough of a reason not to use this solution.
3: 'hasLayout' & 'display: table-cell'…
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:
- Opera 8: buggy
- Opera 9prev1: fine
- Firefox 1.0: almost
- Firefox 1.5RC2: fine
- Safari 1.2.4: no good
- iCab: almost
- IE/Mac: excluded
.container { display: table-cell; } .container { height: 1%; }
4: 'hasLayout' & 'display: table|inline-table'…
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:
- Opera 8: buggy
- Opera 9: fine
- Firefox 1.5RC2: no good
- Firefox 1.5: fine
- Safari 1.2.4: fine
- iCab: fine
.container { display: table; display: inline-table; } .container { height: 1%; }
conclusion…
CSS-table will make the container expand to contain the floating image / element, but its practical use for this purpose is severely restricted by weak and buggy implementation in many browsers.
Advice: Use the combined example 4: 'display: table|inline-table'for best result.
Opera 8 is clipping the heading at the edge of the test-container as if CSS-table has 'overflow: hidden' wired in. Strange paddings on test-container. This is OK in Opera 9.
Safari 1.2.4's rearranging when 'display: table-cell' is defined, makes no sense.
I make limited use of CSS-table's functionality in my designs—like this one, and am looking forward to some progress across browser-land. I will have to revisit this page as browser-makers (hopefully) get their acts together.
sincerely
Hageland 04.sep.2005
last rev: 04.sep.2007
investigating 'hasLayout'...