Why is the W3C box model considered better?

Posted by Mel on Stack Overflow See other posts from Stack Overflow or by Mel
Published on 2010-03-12T01:02:36Z Indexed on 2010/03/12 1:07 UTC
Read the original article Hit count: 293

Filed under:
|
|

Why do most developers consider the W3C box-model to be better than the box-model used by Internet Explorer?

I know it's very frustrating developing pages that look the way you want them on Internet Explorer, but I find the W3C box-model to be counter-intuitive. For example, if margins, padding, and border were factored into the width, I could assign fixed width values for all my columns without having to worry about how many columns I have and what changes I make to my padding and margins.

Under W3C box model I have to worry about how many columns I have, and develop something akin to a mathematical formula to calculate my values. Changing them would nightmarish, especially for complex layouts. My novice opinion is that it's more restrictive. Consider this small frame-work I wrote:

#content {
margin:0 auto 30px auto;
padding:0 30px 30px 30px;
width:900px;
}
    #content .column {
        float:left;
        margin:0 20px 20px 20px;
    }
    #content .first {
        margin-left:0;
    }
    #content .last {
        margin-right:0;
    }   
        .width_1-4 {                    
            width:195px;                
        }                       
        .width_1-3 {
            width:273px;                
        }
        .width_1-2 {
            width:430px;
        }
        .width_3-4 {
            width:645px;
        }
        .width_1-1 {
                    width:900px;
        }

These values I have assigned here will falter unless there are three columns, and thus the margins at 0(first)+20+20+20+20+0(last). It would be a disaster if I wanted to add padding to my columns too, as my entire setup would have to be re calibrated. Now imagine if column width incorporated all the other elements, all I would need to do is change one associated value, and I have my layout. I'm less criticizing it and more hoping to understand why it's better, or why I'm finding it more difficult.

Am I doing this whole thing wrong? I don't know very much about this topic, but it seems counter intuitive to use W3C's box-model. Some advice would be really appreciated.

Thanks

© Stack Overflow or respective owner

Related posts about css

Related posts about box-model