Problem with converting to divisions

[Richard]

http://1-large-world.com/stargate/movie/tooltip3.html#

IN IE 6 and Opera 7, things look like I want them.
In Mozilla, the white and black bordered divisions are nowhere near where
they're supposed to be.
It's like 'float' doesn't even exist.
Ok so I kind of cleared that up by making both the red and white bordered
divisions the same height.
The four images are supposed to be within the black division, not underneath
it.
Why is this?
If mozilla is correct, then opera 7 isn't by any means.

 

[Steve Pugh]

http://1-large-world.com/stargate/movie/tooltip3.html#

IN IE 6 and Opera 7, things look like I want them.
In Mozilla, the white and black bordered divisions are nowhere near where
they're supposed to be.
It's like 'float' doesn't even exist.
Ok so I kind of cleared that up by making both the red and white bordered
divisions the same height.
The four images are supposed to be within the black division, not underneath
it.
Why is this?
If mozilla is correct, then opera 7 isn't by any means.

When an element is floated it is removed from the document flow. This
means, amongst other things, that it does not contribute towards the
height of its parent. On this basis Mozilla is correct. Opera 5 and 6
are also correct.

It seems to be the width on the parent element (i.e. the div.boxtitle
{ width:90%; }) that makes both O7 and IE6 include the floated images
in the height calculation for that element. Remove the width and both
IE6 and O7 behave like Mozilla.

I have no idea why specifying a width should change how the height is
calculated. This may be a bug in IE and O7 or it may be some subtle
feature of CSS that I'm unaware of, and thus a bug in Mozilla.

Steve

 

[Richard]

any means.

When an element is floated it is removed from the document flow. This
means, amongst other things, that it does not contribute towards the
height of its parent. On this basis Mozilla is correct. Opera 5 and 6
are also correct.

It seems to be the width on the parent element (i.e. the div.boxtitle
{ width:90%; }) that makes both O7 and IE6 include the floated images
in the height calculation for that element. Remove the width and both
IE6 and O7 behave like Mozilla.

I have no idea why specifying a width should change how the height is
calculated. This may be a bug in IE and O7 or it may be some subtle
feature of CSS that I'm unaware of, and thus a bug in Mozilla.

Steve

That's what I was wondering.
But then if I can't control the width with nested divisions, what's the
point of nested divisions?

How do I then go about centering the division (boxtitle) in the page?
<center> doesn't work with divisions as it does with tables.

 

[Richard]

any means.

When an element is floated it is removed from the document flow. This
means, amongst other things, that it does not contribute towards the
height of its parent. On this basis Mozilla is correct. Opera 5 and 6
are also correct.

It seems to be the width on the parent element (i.e. the div.boxtitle
{ width:90%; }) that makes both O7 and IE6 include the floated images
in the height calculation for that element. Remove the width and both
IE6 and O7 behave like Mozilla.

I have no idea why specifying a width should change how the height is
calculated. This may be a bug in IE and O7 or it may be some subtle
feature of CSS that I'm unaware of, and thus a bug in Mozilla.

Ah hah. If I define a height, the problem in mozilla goes away.