investigating 'hasLayout'...

...reverse engineering #6...

containing floats with CSS only…

Wrapping up all previous cases into a preliminary conclusion. I want to contain floats in as many browsers as possible, and without any extra mark-up.

This page make use of local and section-wide stylesheets for layout, and will appear slightly different in different browsers. That doesn't affect the demo/test significantly, and is part of my strategy for real world testing.

demo/test…

Floating elements are not contained in any of my browsers.

This is a misplaced paragraph that has ended up inside this container by accident. Following this paragraph are some even more misplaced images and stuff that are floated left and right for the sake of demonstration.

test-imagetest-imagetest-image

another misplaced and totally floating paragraph

test-imagetest-image

Different browsers show different degree of “non-containment” and float-spread, but these floating elements have clearly fallen out of the container.

demo/test…

Floating elements are contained in all my browsers.

This is a misplaced paragraph that has ended up inside this container by accident. Following this paragraph are some even more misplaced images and stuff that are floated left and right for the sake of demonstration.

test-imagetest-imagetest-image

another misplaced and totally floating paragraph

test-imagetest-image

Different browsers show different degree of “containment” and float-spread, but these floating elements are all well contained inside the container.

working in:
  • IE6: fine
  • Opera 8.5: close
  • Opera 9prev1: fine
  • Firefox 1.5RC2: fine
  • Safari 1.2.4: fine
  • iCab: fine
  • IE5.2.3 Mac: fine
  • IE7 beta: fine
.contain {
overflow: auto;
}

.contain {
display: inline-table;
}

.contain {
min-height: 1px;
}

* html .contain {
height: 0;
overflow: visible;
}

/*\*//*/
* html .contain {
height: auto; 
}
/**/

dissection…

The relevant CSS is split into parts so it should be easy to implement. It's all pointed at one class-name that can be declared on any container.

I apply styles specified in the CSS 2.1 spec - 9.4.1, to create a 'new block formatting context' in standard compliant browsers. Not all browsers are up to the same specs just yet, so I use two alternatives in order to catch them all the best I can at the moment.

These pretty basic definitions will work well on their own. They are not “bullet-proof”, so the usual care has to be taken not to disturb them with other styles pointed at the same elements.

alternative containment solution 1:

The following works quite well in Moz/Firefox, Opera 8.50 & Safari, but have less favorable effects in Opera 9prev1, IE/win and IE/Mac.

.contain {
overflow: auto;
}
alternative containment solution 2:

The following works quite well in Opera 9prev1, Safari & IE/Mac. Moz/Firefox and IE/win don't understand it.

.contain {
display: inline-table;
}
containment solution for IE5.0/5.5/6.0/win:

The following 'height' works well in IE6 and IE5+/win - that's the hasLayout trigger. I'm also counteracting problems with 'visibility' in IE5+ by setting it to 'visible' for IE/win. The '* html' hack will keep the good browsers, and also IE7, from seeing these IE-only definitions.

* html .contain {
height: 0;
overflow: visible;
}
containment solution for IE7:

Testing a new 'hasLayout' trigger for IE7. It shouldn't be necessary in this test, as 'overflow: auto' should work as intended in IE7.

.contain {
min-height: 1px;
}
IE/Mac trim:

IE/Mac can read IE/win's CSS served via the '* html' hack, but since IE/Mac doesn't have any IE/win bugs, it will not react well on a zero 'height'. Such a height-value will be interpreted correctly by IE/Mac, so I have to counteract it with a new definition – inside an IE/Mac-only comment.

/*\*//*/
* html .contain {
height: auto; 
}
/**/

compacted version:

Now that all the different parts are explained, we can put the essentials together for a more practical “expand to contain floats” styling.

.contain {
overflow: auto;
display: inline-table;
min-height: 1px;
}

* html .contain {
height: 0;
overflow: visible;
/*\*//*/
height: auto;
/**/
}

As of December 2007 with Firefox 3beta, Opera 9beta and Safari 3win up and running, it works as intended in all browsers on my list. The latest browser-versions have improved support for parts of the “contain floats” styling, but since there's no conflicts between styles in there the effect remains unchanged – the result of proper use of standards to begin with.

conclusion…

Containing floats is simple enough, but pixel-perfection across browser-land can not be expected – regardless of method. Pixel-perfection is of course pointless in any case, since browsers don't really calculate anything into screen-pixels the same way anyway.

sincerely  georg; sign

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

investigating 'hasLayout'...

additions:

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

XHTML 1.0 Strict served as text/html.

IE6 is in Strict mode.

IE/Mac is included.

external resources

examples…
…2005 - 2007