Previous Message
Next Message

Unrelated divs seem to be interlinked on the bottom border.

Sent by Gunlaug_Sørtun on 17 September 2005 17:05

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.

css-discuss [EMAIL-REMOVED]]
List wiki/FAQ --
Supported by --
Previous Message
Next Message

Message thread: