Box-Model Lunacy

Dec 11, 2007 by Matt | Posted in Design One Comment

I’ve been doing some design work lately, and I’ve been dealing heavily with the Box Model.

If I want to create a 200px-wide box with 3px padding, I have to set the width to 194px. Why? Because otherwise the box ends-up as 206 pixels wide. Why is the box model like this? 200 pixels wide should mean 200 pixels wide. The three pixels in padding shouldn’t change the size of the box, just the textual content inside the box. It just makes more sense.

What do you think? Does the Box Model make sense to you as it is, or is my way better?

  • http://blog.fcon21.biz John W. Furst

    It’s only a matter of what you need to achieve, is it?

    If your inside is an image, you probably would not want it to be clipped, because the inside gets smaller as you increase the padding or border width! In other scenarious you might need to ‘fix’ the total width, including the margin.

    That way it works from inside to outside. Yes, it might be confusing,
    but at least on a consistent basis.

    I struggle more with the restrictions that come from the required order of content in HTML and display position.

    E.g.

    I’d love to have ‘left sidebar(fixed width)’, ‘main content (flexible width)’, ‘right sidebar (fixed width)’ in a fluid CSS based layout with the order ‘main’, ‘left sb’, ‘right sb’ in HTML.

    I figured out how to do it with nested floaters, but it only works, if I fixate the width of the main container as well (which I don’t want to do.)

    So much comment for CSS.
    Yours
    John

    P.S.: Wish you continous success in 2008.