Previous Message
Next Message

Unrelated divs seem to be interlinked on the bottom border.

Sent by Gunlaug_Sørtun on 17 September 2005 16:04


Alan Chandler wrote:
> Thank you, it works

Good ;-)

> However, I am still stuggling to understand

No wonder, as the mechanisms involved are used by many, but have not
been well documented anywhere -- until now.

We investigated these mechanisms while looking for /similarities/
between a well known "fix" for some IE6 bugs-- using 'hasLayout'[1], and
CSS 'block formatting contexts', since we needed some standard-compliant
solutions and workarounds for those proprietary MSIE constructs.

> a) Why exactly clear:both is having the effect it has, and

In your page; 'body' itself is the limit for what standard-compliant
browsers will calculate 'clear: both' to be affected by. The floating
menu is within that range -- unless some other limitation or isolation
is applied.

> b) Why the new stuff isolates it.

I'm utilizing W3C standards 'block formatting contexts'[2] to create 'an
"isolated box" next to floats'[3][4]. IE/win gets its own 'hasLayout'[1]
trigger that'll act /pretty much/ the same way.

Margins are applied to the "isolated box" itself, instead of its
content, and relates to the margin-edge of the floating menu. That
explains the changed margins. IE/win is still buggy though, and IE5.0
will choke on 'overflow: hidden;' (hide everything), so they get an
extra "fix".
---

Your thinking isn't far off :-) , but, as usual: 'the devil is in the
details'. Besides; standards are changing and browsers are buggy. Study
the linked documentation well for complete understanding of how it
works, and why I've used 'the exact solution' to solve this case.

---

I would normally design a page like yours as a 'float-construct', which
would avoid the use of 'clearfix' and other "fixes" altogether since
floats "isolates" and "expands to contain" according to CSS-specs.
However, that would mean reconstructing your entire page so I didn't see
that as an option.

regards
	Georg
---
[1]<http://www.satzansatz.de/cssd/onhavinglayout.html>
[2]<http://www.w3.org/TR/CSS21/visuren.html#q15>
[3]<http://www.gunlaug.no/contents/wd_example_01_02.html>
[4]<http://dev.l-c-n.com/IEW/float-formatting-context.php>
-- 
http://www.gunlaug.no
______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Previous Message
Next Message

Message thread: