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.

test-image
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  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 Strict mode.
IE7 is in standard mode.

IE/Mac is excluded from all but the last example.

external resources

examples…
…2005 - 2007