investigating 'hasLayout'...

...reverse engineering #5...

other solutions for containing floats…

According to standards: floats will expand to contain floats. That's also about the only definition that IE/win treats somewhat close to standards, so floats may actually work.

Clearing below floats using generated content with the pseudoclass ':after' is also an option, which most standard-compliant browsers have catched up on.

Putting solid clearing-elements below floats have always worked, and will continue to do so. Not "smart", but always efficient.

For completeness, read up on Clearing methods.

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
_height: 0;

2: 'hasLayout' and 'float: left'…

Floating image is contained in all 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.

test-image
working in:
  • IE6: fine
  • Opera 8+: almost (see below)
  • Firefox 1.0: fine
  • Safari 1.2.4: OK
  • iCab: almost (see below)
float: left;
_display: inline;

Note: IE/win need a fix for its 'margin-doubling-bug' on floats. A simple '_display: inline' will take care of that.

Note: Opera 8+ (and iCab) seems "confused", and won't make good use of awailable width when 'width: auto(default)' is defined on floats. The "cure" is of course to define a width other than auto. This "cure" is not used on example 2 because it comes in conflict with margins, border-width and paddings in a flexible layout, so this "confusion" should be clearly visible in all browsers / versions that have this weak point.

3: 'clear: both' using generated content…

Floating image is contained in "all" 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.

test-image
working in:
  • IE6: fine
  • Opera 8: OK
  • Firefox 1.0: fine
  • Safari 1.2.4: fine
  • iCab: fine

See: easyclearing for CSS-code and info.

4: solid <br class='clear: both' /> element…

Floating image is contained in all 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.

test-image
working in:
  • IE6: fine
  • Opera 8: fine
  • Firefox 1.0: fine
  • Safari 1.2.4: fine
  • iCab: almost
br.both {
font-size:1px;
line-height: 0;
height: 0; 
clear:both;
}

Note: the combination of a <br /> as clearing-element, and 'hasLayout=true' on the container in IE/win, is what makes this clearing-method work as well as it does across browser-land. Reason: IE/win is buggy, and need that 'hasLayout' trigger.

conclusion…

Example 2 & 3 should satisfy most needs for pure CSS solutions, in that they may actually work—after juggling those styles some across browser-land.

Example 4 is concidered to be "not pure enough" by some elitists, because of the extra element that's needed. However, it is 'according to W3C-standards' to use a clearing-element to clear below floats – period.

I use example 2 & 4 for containing floats in almost all cases, as I find the flexibility of using floats to contain floats near perfect in most cases. I also prefer the visible line break of a solid <br /> in non-CSS browsers, and the improved control of "look".

I'm waiting for W3C to create some consistant standards, and for browser-makers to clean up their acts and get some working logic into their software. In the mean time; we better learn how, and when, to use each alternative, if we want cross-browser stable solutions.

sincerely  georg; sign

Hageland 04.sep.2005
last rev: 19.nov.2005

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.

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

external resources

examples…
…2005