Welcome to WebmasterWorld Guest from

Forum Moderators: not2easy

Message Too Old, No Replies

Calculating div width with padding and margins



3:46 am on Mar 28, 2009 (gmt 0)

10+ Year Member

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 {
margin-left: auto ;
margin-right: auto ;

#colleft {
padding-top: 7px;
margin-left: 10px;
text-align: left;
float: left;

#colright {
text-align: right;
float: right;


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


1:09 pm on Mar 28, 2009 (gmt 0)

WebmasterWorld Senior Member swa66 is a WebmasterWorld Top Contributor of All Time 10+ Year Member

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:

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)


7:15 pm on Mar 28, 2009 (gmt 0)

10+ Year Member

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.


11:39 am on Mar 30, 2009 (gmt 0)

10+ Year Member

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.


Featured Threads

Hot Threads This Week

Hot Threads This Month