Re: box-sizing alternative

No, the box-sizing thing doesn't do what I want.  The problem with it is
that it is not intuitive.  Say you are trying to explain this to someone new
to CSS.  Let's try each way:

A. Using box-sizing

The size of the content are of the box is defined by "width", unless
"box-sizing: border-box", in which case "width" refers to the size of the
entire box including padding and border. If you want the box to be "100px"
wide and padding to be "4px" and the border to be "3px", set "width: 100px"
but be sure to remember to set "box-sizing: border-box", or your box will
actually turn out to be "114px" wide. Or, you could just do the math and set
"width: 86px".  If the physical content of the box exceeds
("width"-("border"+"padding")) (if "box-sizing: border-box") or "width" (if
"box-sizing: content-box") then "width" will always expand.

B. Using 4 "width"/"height" regions

The inside of a box has 3 sizable regions: "border", "padding", and
"content".  You can set the size of each of these regions explicitly if you
want control of each of them.  If you merely want to set the size of the
entire box, use "width".

If "width" is defined, and the physical content of the box, or
"content-width",  exceeds ("width"-("border"+"padding")) then "width" has
two choices:  if "content-grow: expand" then "width" will expand to fit it's
content.  If "content-grow: clip" then the content will be clipped within
this region: "rect(0px, width, auto, 0px)".

-----

In my humble opinion, B is a better solution.  There are no messy swapping
of definitions.  You simply tell the box what size it's regions are, and how
to cope if they are too big for their britches ("width").

Received on Tuesday, 29 February 2000 13:43:40 UTC