investigating 'hasLayout'...

...reverse engineering #5...

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

_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.

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.

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.

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 

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