Flawed W3C Box Model
Doesn't it irritate all you web designers that the whole HTML/CSS approach to web design is still full of little holes? It seems like CSS2 has very little consistent browser support, while 3 is practically ready to be released. Well, maybe you all have fun trying to cover up for the mistakes in the W3C model, or its imperfect implementation. I sometimes have fun trying to imagine a way to fix something by using an off-the-wall trick, but most of the time I wish it would just work!
The funny thing is that most CSS elements and attributes were designed for a specific purpose by an item called a recommendation by a committee of standard creating nerds. But in the real world, these "perfect" concepts don't always play out as they are supposed to. Or maybe they are being displayed as the W3C intended, but the results are not at all useful or sensible, and often downright blast annoying!
My biggest frustration or challenge is with the whole CSS box model and container concepts. Personally, I think the box model as it is currently defined is lacking and perhaps flawed. A complete "box" is defined as the sum of content, padding, border and margin. Therefore, if you define a container as being 500 pixels wide, but have 20 pixels of padding and a 3 pixel border on all sides, the complete box will be 546 pixels wide. So it will thus occupy a space of 546 pixels. This is so hard to account for, and it creates erroneous situations more often than not.
The ultimate example of the flawed box model is when you want to do proportional sizes. Let's say you want a container to fill the width of the browser window, so you define its width as 100%. Sure, that makes sense. Ah, but then let's say you want more than an ordinary box. You want the text inside it not to butt up against the sides, so you add some padding. In addition, you don't want your box to lie flat against the browser border, so you add some margin to both sides. Well, pajama berries you now have because padding, border and margin all add to the already set value of 100%. So now you have to scroll horizontally just to see your commonplace padding and margins in effect.
The solution, of course, is to reinvent the box model so that padding, border and margin negate from, rather than adding to the total size of the element. Man, why aren't I on the W3C committee. Oh well, I guess it is much more convenient to be forced to use Javascript to actively check for the variable element width and adjust its values accordingly so it always add up to exactly 100% of the window. Much more simple and intuitive, wouldn't you say? Sorry, can't help myself. Obviously there is no perfect box model, perhaps it should be allowed to change the additive property of the box model manually to suit certain needs.