Why is the W3C box model considered better?
- by Mel
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
