interpretation of "auto" for block-level elements

Here is an example of some of the problems caused by the current CSS2
definition for how "auto" is interpreted for "width" and "height" on
block-level elements.

CSS2 states that block-level elements with "width" or "height" set to "auto"
will take on the size of their containing block.  This means that any
application which wishes to define an alignment scheme for absolutely
positioned elements cannot do so.  Any children whose size is dependent on
the size of it's content, such as a text label, needs to represent it's
intrinsic size, just as inline text would need to do so for obvious reasons.
Just as the browser's native layout engine needs to be able to flow inline
text, certain Javascript applications will need to have the same capability.

A have created a quick little demo of the problem here:

http://www.joehewitt.com/w3c/circle.html

Load this in Mozilla to see the CSS2 interpretation, then try it in IE5 to
see the way I think it should behave.

As you can see, Mozilla uses the intrinsic height of the element, but not
the intrinsic width.  This causes a bunch of very wide boxes where there
should be boxes that are the width of their content (in this case, some
inline text). Not only is this ugly, but it causes functionality problems
for alignment. Notice that "Horizontal Align" is now useless because we
can't get the boxes to line up the way they should.

Is this illustration sufficient for communicating my point?

- Joe

Received on Friday, 3 March 2000 14:13:30 UTC