investigating 'hasLayout'...
...reverse engineering #2...
'hasLayout' vs. 'overflow: hidden|auto'…
Using 'overflow: (value other than visible)' has become popular for making a container auto-expand to contain floats. 'Overflow: hidden|auto' will make an element establish a 'new block formatting context' — an isolated container, which will keep it from flowing into the space occupied by preceiding floats — see: CSS 2.1 - floats. This 'new block formatting context' may come handy in many cases.
Repeating the examples from 'hasLayout' vs. 'display: table', but now using 'overflow: hidden|auto' to achieve the same effect.
How about lining up the left edge of a paragraph in the flow with a floating image that's
preceding it, no matter the size of the image or the length of the paragraph. Triggering 'hasLayout' will
achieve this in IE/win (see: Elements next to floats), so now I just have to
replicate it across browser-land.
Oh... it looks like I just made it happen.
If you're in a hurry... this line-up is achieved as in example 4
further down this page.
Might be a good idea to study the awailable methods in depth though, as "blind copying" have a tendency to
fail when injected into 'real world web designs'.
some old browsers are lost, and some new browsers disagree…
Establishing a 'new block formatting context' using 'overflow: hidden|auto' may work quite well, but there are plenty of unclear details surrounding the interpretation of such layout-blocks. Don't expect much of any but the newest browser-versions, and even they may not land on exactly the same interpretation.
Only IE/win need hacks, but my standard compliant browsers are not in complete agreement on how to interpret margins here, so keep a close watch on how margins and paddings affects the results. The idea is of course to make it 'look (more or less) the same' across browser-land, by finding the middle-ground.
Some browsers includes the side-margins in such an isolated layout-block, which makes the block larger. That's even when width is default/auto, which is what we need it to be for auto-adjustment. This 'margin-inclusion' may make the layout-block fall below the float, which is definitely not what we want.
Other browsers will let the side-margins flow behind the float, which may look just fine. However, this may make debugging more difficult since side-margins then becomes invisible and the elements interacts as if there are no side-margins there at all.
These differences may not become problematic in all cases, but you should be aware of them for the time being. The best way to solve problems induced by these differences when using 'overflow: hidden|auto' to create such 'next-to-float' layouts, seems to be to set side-margins to zero and use side-paddings for adjustments.
1: starting off with the basics…
This is how a paragraph in the flow will line up with a floating image. The text is wrapping around the image, while the left edge of the paragraph is ignoring the float's presence. This is normal behavior in all browsers - even in IE/win when 'hasLayout=false'. This is not what we want in this case.
This is a misplaced paragraph that has ended up here by accident. I've made this paragraph long enough to force a few line-breaks, and added some basic styles to it. Apart from that it doesn't make much sense to read it, and I might as well have used 'Lorem ipsum' or something of that nature.
basic style:
p {
border-left: solid 2px #39c
}
Note: the above style is applied to all test-paragraphs - and reversed.
2: 'hasLayout'…
No good browser will make anything useful out of this.
working in:
- IE/win only
This is a misplaced paragraph that has ended up here by accident. I've made this paragraph long enough to force a few line-breaks, and added some basic styles to it. Apart from that it doesn't make much sense to read it, and I might as well have used 'Lorem ipsum' or something of that nature.
added style:
p {
height: 1%;
}
Note: This non-standard line-up caused by 'haslayout' is what we want to replicate in standard-compliant browsers.
3: 'overflow: hidden'…
IE/win pre IE7 doesn't understand this.
working in:
- Opera 8.0
- Firefox 1.0
- Safari 1.2.4
- iCab
- IE7
This is a misplaced paragraph that has ended up here by accident. I've made this paragraph long enough to force a few line-breaks, and added some basic styles to it. Apart from that it doesn't make much sense to read it, and I might as well have used 'Lorem ipsum' or something of that nature.
added style:
p {
overflow: hidden
}
Note: Now we have IE7 on board, but older IE/win-versions are lost and in need of a 'hasLayout' trigger.
4: 'hasLayout' & 'overflow: hidden'…
Works regardless of image-size.
working in:
- IE/win
- Opera 8.0
- Firefox 1.0
- Safari 1.2.4
- iCab
This is a misplaced paragraph that has ended up here by accident. I've made this paragraph long enough to force a few line-breaks, and added some basic styles to it. Apart from that it doesn't make much sense to read it, and I might as well have used 'Lorem ipsum' or something of that nature.
added style:
p {
overflow: hidden;
}
* html p {
height: 0;
overflow: visible
}
See: case-related test / example.
...and when reversing side, using the same style on the paragraph...
This is a misplaced paragraph that has ended up here by accident. I've made this paragraph long enough to force a few line-breaks, and added some basic styles to it. Apart from that it doesn't make much sense to read it, and I might as well have used 'Lorem ipsum' or something of that nature.
Note: IE5.0 needs "protection" from the combination of 'overflow: hidden' and 'height: 0'. This is achieved by serving 'overflow: visible' for IE6 and older win.versions, since none of them can make any use of 'overflow: hidden' anyway in this scenario — see: example 3.
Note: as usual; IE/Mac is protected from seeing any of this code.
5: 'hasLayout' & 'overflow: auto'…
Works regardless of image-size. Basically the same result as with 'overflow: hidden', but not quite as safe to use in all cases.
working in:
- IE/win
- Opera 8.0
- Firefox 1.0
- Safari 1.2.4
- iCab
This is a misplaced paragraph that has ended up here by accident. I've made this paragraph long enough to force a few line-breaks, and added some basic styles to it. Apart from that it doesn't make much sense to read it, and I might as well have used 'Lorem ipsum' or something of that nature.
added style:
p {
overflow: auto;
}
* html p {
float: left|right
overflow: visible
}
...and when reversing side, using a similar style on the paragraph...
This is a misplaced paragraph that has ended up here by accident. I've made this paragraph long enough to force a few line-breaks, and added some basic styles to it. Apart from that it doesn't make much sense to read it, and I might as well have used 'Lorem ipsum' or something of that nature.
Note: 'float: left|right' is triggering 'hasLayout' by default in IE/win. Other browsers will choke on this, so once again we have to hack in the 'hasLayout' trigger for IE/win only.
conclusion…
Once again we are using establishment of a 'new block formatting context' in accordance with CSS 2.1 spec - 9.4.1 to work around cases of 'hasLayout=true' in IE6 and older win-versions.
IE/win is only superficially in line with standards here, since it doesn't follow the actual standards behind the establishment of a 'new block formatting context' at all. IE/win will only establish something that look like a 'new block formatting context' when handling its own, proprietary, 'hasLayout' triggers.
This page shows one way to use W3C standards to accomodate standard compliant browsers — as we should, and hacks to fix a buggy and flawed IE/win — because we have to.
This way to approach a buggy browser — through standards, is the only safe way forward. Recommended.
sincerely 
Hageland 01.sep.2005
last rev: 04.sep.2007
investigating 'hasLayout'...
'hasLayout':