homepage Welcome to WebmasterWorld Guest from 54.166.96.101
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
Calculating div width with padding and margins
Kahless

10+ Year Member



 
Msg#: 3880553 posted 3:46 am on Mar 28, 2009 (gmt 0)

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

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



 
Msg#: 3880553 posted 1:09 pm on Mar 28, 2009 (gmt 0)

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

10+ Year Member



 
Msg#: 3880553 posted 7:15 pm on Mar 28, 2009 (gmt 0)

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

10+ Year Member



 
Msg#: 3880553 posted 11:39 am on Mar 30, 2009 (gmt 0)

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.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved