I hope it's OK to include this attachment.
This file is a proof-of-concept for three vertically stacked outer DIVs
with the middle DIV using a scrolled overflow. It seems that the
overflow won't work unless the DIV is floated or positioned. I want to
avoid absolute positioning; I see this same behavior whether I'm using
position:relative on the middle DIV, or float on the middle DIV plus
clear on the top and bottom ones.
The problem is, it seems, the borders on the inner DIVs are somehow
causing an overlap of the outer ones, such that the edges of the actual
content (within the borders) are flush. This is highly
counterintuitive, and baffling. The whole reason I'm using outer plus
inner DIVs is so I can control the DIV heights in the outer ones without
worrying about the interaction of padding or borders on the box model.
I can fix it by adding top & bottom margins, each equal to the combined
height of the borders, to the middle (outer) DIV. This attachment is
strict but I see the same behavior in quirks mode. In Opera 9.10, I see
the same behavior in strict mode; in quirks, Opera places the DIVs per
my expected behavior, with the edges of the outer DIVs flush. In quirks
mode, IE6 doesn't handle the height/overflow of the inner DIV, but in
quirks or strict, it aligns the DIVs as I expect. Which means, if I add
the margins, then Opera (in quirks) and IE6 (in both modes) have a gap
between the DIVs.
I know, I can use a strict DTD plus an IE quirk to add the margin, and
that will let this work OK. But can anyone explain just why the margins
are necessary in the first place?
_______________________________________________
dev-tech-layout mailing list
[email protected]
https://lists.mozilla.org/listinfo/dev-tech-layout
