Re: Displaying a structure in CSS

ValerieGSharp wrote:

> 

> > Position: relative of course means that the float behaves like a static

> > element:

> 

> Since when?

> Static is non-positioned.

> Relative, absolute, and fixed are positioned.



Indeed, and floats are also outside normal flow. The spec states that a
float does not float when it follows a positioned element; i.e. it
behaves like a normal static element. Positioning relatively an element,
but then not moving it (as you did) has two potentially desirable
effects:



1. create a new containing block: nice for absolute positioning

2. suppress subsequent floats



> i.e. relative positioning is probably spurious - 'float' in block boxes

> before and after should probably take them all out of the natural flow,

> and float them relative to their containing blocks.

> 

> > Therefore Moz and IE are both wrong: the

> > rendering should indisputably be:

> >

> > +----+

> > |A   |

> > +----+

> > +----+

> > |B   |

> > +----+

> > +----+

> > |F   |

> > +----+

> > +----+

> > |G   |

> > +----+

> > +----+

> > |C   |

> > +----+

> > etc.

> >

> 

> CSS 9.5: "Any floated box becomes a block box that is shifted to the

> left or right until its outer edge touches the containing block edge or

> the outer edge of another float. "

> 

> The way I read it, floated blocks within the same containing block

> should sit side by side where space permits.



Indeed; however, not when the element is positioned.



> > IE is demonstrating its bad implementation of text-align, and both

> > browsers show us that they have difficulties where the element being

> > closed is not the previous one - they forget that it is positioned.

> 

> Didn't quite follow that one...



I.e. while it correctly copes with: <div style="float: left; position:
relative; width: ????"></div><div style="float: left; width:
????"></div>, realising that the position: relative means that the
element is positioned and therefore should not be affected by floats,
where there is nesting, buggy code means that both browsers you tested
can only cope with a barren element (one without children).



-----------------------------------
Please visit http://RichInStyle.com. Featuring:
MySite: customizable styles.         AlwaysWork style 
Browser bug table covering all CSS2 with links to descriptions.
Lists of > 1000 browser bugs         Websafe Colorizer 
CSS2, CSS1 and HTML4 tutorials.      CSS masterclass 
CSS2 test suite: 5000++ tests and 300+ test pages.

Received on Thursday, 10 August 2000 06:13:25 UTC