Calculating div width with padding and margins

[Kahless]

I want to set my div width for a 2 column layout to 1024px. But I have specific margins and paddings set within each column.

My question is in order to have a 1024px is the proper way of doing this is subtracting the padding and margin sizes from 1024? In this case below subtracting 17 from 1024 = 1005px.

#wrap {
width:1005px;
 margin-left: auto ;
margin-right: auto ;
}
#colleft { 
padding-top: 7px;
margin-left: 10px;
text-align: left;
float: left;
}
#colright { 
text-align: right;
float: right;
}

thx

[edited by: Kahless at 3:47 am (utc) on Mar. 28, 2009]

[swa66]

Width you set is the with of the inside on the element.
If you add padding, that goes around it, adding to the overall width.
If you add a border, that goes around the padding, adding to the overall width.
Margins go around the border.

See also:
[w3.org...]

I don't understand how you got to the 17px (adding top padding and left margin hardly makes sense, so I don't get where it comes from)

[Kahless]

It was late and made a mistake in the example. I meant that to be padding-left not padding-top. Which is how I came up with 17. 10+7. So subtracting 1024-17 = 1007 not 1005.

colleft and colright were wrapped in wrap div. I do not want anything to exceed 1024px. But thought if I set wrap to 1024 and I have margin/padding set in colleft and colright it will exceed 1024px. Therefore I think I need to set the wrap div to 1007 instead of 1024?

The problem I have is anytime I do anything in CSS with divs everything keeps exceeding 1024px. Even if I set max-width and wrapper to 1024px. So I am assuming I must subtract any padding and margins in divs to set the maximum width.

[simonuk]

Yes you will need to subtract the margin from the overall size of the div but you're going to run into other problems because you're giving a left margin to left-floated element which kicks in an IE6 bug (double margin bug). Add display:inline to #colleft to sort that one out.

For positional elements I always use margins as I find paddings can cause a number of problems in IE but you need to be aware that even margins are not completely exempt as you see from above.