...

View Full Version : Understanding the Padding Attribute



ScottInTexas
09-19-2007, 02:36 PM
When I add right padding to my div instead of the text within the div becoming narrower and the div staying the same size the div actually grows. The documentation describes what I am trying to do.

My div is set to 85% width of the screen and I want the text to only span 75% of the div. So I have set the right padding to 25%. What's the deal? Am I reading all the documentation wrong?




<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Positioning Divs With CSS</title>
<link rel="stylesheet" type="text/css" href="divstyles.css" />
</head>
<body>
<div id="overwrap">
<div id="header">
<div id="logo">This is my logo</div>
<div id="company">This Is My Company Name</div>
<div id="motto">This is my company's motto.</div>
<div id="othertop">The rest of the header</div>
</div>
<div id="navigate">Navigate here</div>
<div id="maincontent">This is the main content window</p>
</div>
<div id="calendar">This is my calendar column</div>
<div id="footer">This is the footer</div>
</div>
</body>
</html>




body{
margin:0;
padding:0;
background-color:#99ffff;
overflow:hidden;
}

html{
overflow:hidden;
}

div#header{
position:absolute;
top:0;
left:0;
height:10%;
width:100%;
/*background-color:gray;*/
}

div#logo{
position:absolute;
top:0;
left:0;
height:100%;
width:15%;
/*background-color:blue;*/
/*border:medium solid green;*/
}

div#company{
position:absolute;
top:0;
left:15%;
height:60%;
width:70%;
/*background-color:green;*/
}

div#motto{
position:absolute;
top:60%;
left:15%;
height:40%;
width:70%;
/*background-color:limegreen;*/
}

div#othertop{
position:absolute;
top:0;
left:85%;
height:100%;
width:15%;
/*background-color:magenta;*/
}

div#navigate{
position:absolute;
top:10%;
left:0;
height:85%;
width:15%;
/*background-color:beige;*/
}

div#maincontent{
position:absolute;
top:10%;
left:15%;
width:85%;
height:85%;
padding-right:25%;
/*background-color:#00FF99;*/
overflow:auto;
}


div#calendar{
position:absolute;
top:10%;
left:85%;
height:85%;
width:13.7%;
/*background-color:#660033;*/
}

div#footer{
position:absolute;
top:95%;
left:0;
width:100%;
height:5%;
/*background-color:#FFCC33;*/
}

_Aerospace_Eng_
09-19-2007, 03:30 PM
Padding counts for overall width. You need to decrease the width of your div if you want the padding to increase rather than the div growing.

ScottInTexas
09-19-2007, 05:47 PM
Thanks, I kept messing around with this and got there. It's just not how I read it. I don't like W3C's explanation because it implies that the padding is applied to the inside of the div or element but doesn't say that it will expand the element to maintain the same content dimensions. At least it is not that clear. Thanks for your response. I feel like I have a real solid grasp on positioning divs and their use. I hope this new found knowledge will help someone else soon.

rmedek
09-19-2007, 06:09 PM
I don't like W3C's explanation because it implies that the padding is applied to the inside of the div or element but doesn't say that it will expand the element to maintain the same content dimensions. At least it is not that clear.

Hey Scott,

Just to clarify, the total width/height of an element after it's been rendered is:

margin + border width + padding + element width + padding + border width + margin

Links to help get the CSS box model in your head:

http://www.brainjar.com/css/positioning/default.asp

and

http://www.redmelon.net/tstme/box_model/

Hope this helps…

ScottInTexas
09-19-2007, 06:12 PM
Thanks a lot. I appreciate the links. As a matter of fact the "Box Model" was just what I was looking at. It helped to clarify what I read. The web page I laid out is pretty nice, now that the divs are properly positioned. I don't think it will win any awards, but I like it and my client (my sister) likes it. So I guess that's all that matters.

I appreciate the help I get from the members of this forum.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum