View Full Version : Thoughts on padding

12-10-2002, 01:53 PM
OK, so who at the W3C had the bright idea that padding should ADD to the overall dimensions of an element? (sighs) If I were a more violently-inclined person, I would sugegst that they be shot... but I dislike bloodshed ;)

Now, I am perfectly willing to change my mind if someone (perhaps jkd? you know a lot about css) can convince me that the box model has got it right... however, I believe that it defines both logic and convention.

Starting from scratch, you would think (or rather, I would think) that an element 150px wide with 5px margins would effectively occupy 160px width of space, yes? Yes. And that's what it does. And, that if that object has a 5px border, it should occupy 170px space? (including the margin) ...yes. Except in IE where it doesn't, but we'll ignore that for now. Borders add to the overall dimensions in the box model, and that is fine.

But who in their right mind said that padding should do this too???!!! I would think that the aforementioned element should, when given 5px padding, remain at 170px width, however it should restrict it's contents by 5px all round. But no, it has to add to the overall dimensions! Grrrr! :mad:

It has made my task, although deceptively simple in logic, very tricky in reality, and I haven't got it right yet. Here's what I need to do:

Create a div that fills the available screen area, yet also restricts it's contents to 200px on the left and 100px on the top. Easy? No. I have tried everything I can think of. I have played with padding, margins, dimensions, nested divs... it becomes difficult. I need the div to scroll on overflow, which further adds to the problem because it removes a couple of otherwise workable methods from the pot.

I have posted on a relative subject yesterday, however I had little response, so I am zeroing in on this one div. I am sure that if I get this one done, the rest will be OK.

Over to you guys...

::] krycek [::

12-10-2002, 02:36 PM
Nothing is wrong with the standard. The content is the focal point of the design and you specify it's width and height. Everything else is added.
If anything, blame MS for thinking that they know better and not following the standard (that they partook in creating, mind you).
Now, to accomodate for MS arrogance you have few choices:
- have browser specific stylesheets
- set 0 padding for all the elements and use margins only for spacing between them: padding on the container -> margin on the contained element. Then the only discrepancy would be border width that, when kept to reasonable widths, can be neglected.
- have javascript go through elements and adjust things for IE:
element.style.width =
( parseInt(element.currentStyle.paddingLeft) +
parseInt(element.currentStyle.paddingRight) +
parseInt(element.currentStyle.borderLeft )+
parseInt(element.currentStyle.borderRight))) + 'px'

12-10-2002, 02:38 PM
Just as fun: When an element with a width of 100% extends beyond the width of the containing element.

12-10-2002, 02:41 PM
OT: just a little story on standards in general that I thought you may enjoy (found on ilovebacon.com)

Railroad Gauge
Does the statement, "We've always done it that way" ring any bells? The US standard railroad gauge (distance between the rails) is 4 feet,8.5 inches. That's an exceedingly odd number.

Why was that gauge used? Because that's the way they built them in England, and English expatriates built the US Railroads.

Why did the English build them like that? Because the first rail lines were built by the same people who built the pre-railroad tramways, and that's the gauge they used.

Why did they use that gauge then? Because the people who built the tramways used the same jigs and tools that they used for building wagons, which used that wheel spacing.

Okay! Why did the wagons have that particular odd wheel spacing? Well, if they tried to use any other spacing, the wagon wheels would break on some of the old, long distance roads in England, because that's the spacing of the wheel ruts.

So who built those old rutted roads? Imperial Rome built the first long distance roads in Europe (and England) for their legions. The roads have been used ever since.

And the ruts in the roads? Roman war chariots formed the initial ruts, which everyone else had to match for fear of destroying their wagon wheels. Since the chariots were made for Imperial Rome, they were all a like in the matter of wheel spacing. The United States standard railroad gauge of 4 feet, 8.5 inches is derived from the original specifications for an Imperial Roman war chariot, and bureaucracies live forever.

So the next time you are handed a specification and wonder what horse's *** came up with it, you may be exactly right, because the Imperial Roman war chariots were made just wide enough to accommodate the back ends of two war horses.

Now the twist to the story...When you see a Space Shuttle sitting on its launch pad, there are two big booster rockets attached to the sides of the main fuel tank. These are solid rocket boosters, or SRBs. The SRBs are made by Thiokol at their factory at Utah. The engineers who designed the SRBs would have preferred to make them a bit fatter, but the SRBs had to be shipped by train from the factory to the launch site. The railroad line from the factory happens to run through a tunnel in the mountains. The SRBs had to fit through that tunnel. The tunnel is slightly wider than the railroad track, and the railroad track, as you now know, is about as wide as two horses' behinds.

So, a major design feature of what is arguably the world's most advanced transportation system was determined over two thousand years ago by the width of a horse's ***...

And you thought being a HORSE'S *** wasn't important!

12-10-2002, 04:00 PM
Well thankfully I don't have to do all that stuff to make it the same in IE - just have to force IE to use standards mode, which is easy. Then it behaves the same as Mozilla, albeit not exactly the same.

However, although I greatly loved your story about the railroads etc, I beg to differ from your opinion on the standard as applies to padding. If padding adds to the overall width of an element, that does not make sense. That's not what padding is supposed to be, in my mind. For once I agree with Microsoft - they don't get everything wrong you know, and occasionally it is the W3C who muck up.

Now, because padding adds to my overall width, it causes great problems in a simply task like I am trying to do. I am desperately trying to stay away from both tables and JavaScript, because I set out with the intention to accomplish this is pure CSS. However, instead of being able to say, position: absolute; left: 0px; top: 0px; padding: 100px 0px 0px 200px, I have to try and use all manner of cumbersome and complicated workarounds to 'fix' the problem.

The irony is, I can make Mozilla do this simply by telling it to use a different box-model on this element. However, you can't do that with IE. It either processes in standards mode or it doesn't, and I don't want ALL elements to follow the 'incorrect' model. So once again the browser wars have shafted another good design concept.

...unless anyone has a nice workaround?

::] krycek [::

12-10-2002, 04:06 PM
You can make Mozilla use IE's box model, which I also prefer:


Or you can make IE use the w3c box model, even in quirks mode:


This will only work in IE (win & mac - 5+) and Mozilla browsers, and also only works if the box has its dimensions specified in px.

See http://webfx.eae.net/dhtml/boxsizing/boxsizing.html for more info

12-10-2002, 04:09 PM
As I said, set all paddings to 0px!!!

If you had something like this:

<div style="padding:5px;">
Some text

Make it:
<p style="margin:5px;">
Some text

Then your only discrepancy is the border width, which is not that big of a deal if you keep them small.

12-10-2002, 05:23 PM
vladdy, substituting padding for margin is not a viable option.

::] krycek [::