Percentages

I'm building an entirely CSS oriented layout.

I want to use perentages for my div widths so the width appears the same on all systems.

Obviously if I have a div that is 75%, and I put a div inside that div.. The percentage will refer to the 75%.

So for example if I have a div named #75 and it's width is 75% and I put another div named #100 inside of #75, and I gave #100 a 100% width it would be 100% of #75. Causing #100 to be 75% of the page as well.

What I'm trying to learn is what math do I need to do when adding paddings.

Let's say I have the same divs. (#75 and #100) #75 has a width of 75%. If I give #100 a padding of three pixels how would I know what width to give #100?

Can anyone point me to some excellent tutorials explaining percentages?

Any help would be much appreciated. Thanks.

Subscribing, to hear the discussion :)

You might also look into LESS CSS (http://lesscss.org/), as it allows you to do calculations in your CSS that are pre-processed into CSS. Dunno that it specifically solves this issue (I don't know how this issue is solved), but it might help.

Dave

Adding padding & margins to elements inside a percentage based container will expand the the outter container. If an outter container is set to w: 75% then the inner content will have to reflect the the horiz. padding and margin in a percentage as well...
main container: w: 75%
inner cantainer: w: 98% you also have to allow for horiz. borders that are applied to the inner container. approx. .05 ech. or 1% for both plus padding.

I use a javascript percentage calculator to adjust things correctly, but note if you use on of these you'll need to round off the result.

Adding padding & margins to elements inside a percentage based container will expand the the outter container. If an outter container is set to w: 75% then the inner content will have to reflect the the horiz. padding and margin in a percentage as well...
main container: w: 75%
inner cantainer: w: 98% you also have to allow for horiz. borders that are applied to the inner container. approx. .05 ech. or 1% for both plus padding.



These are the reasons I asked my question. I want to know how to do the math.