Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    Regular Coder
    Join Date
    Nov 2002
    Posts
    567
    Thanks
    2
    Thanked 4 Times in 4 Posts

    Understanding the Padding Attribute

    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?

    Code:
    <!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>
    Code:
    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;*/
    }
    Scott Stewart
    Always happy to learn from pros.

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    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.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #3
    Regular Coder
    Join Date
    Nov 2002
    Posts
    567
    Thanks
    2
    Thanked 4 Times in 4 Posts
    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.
    Scott Stewart
    Always happy to learn from pros.

  • #4
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    Quote Originally Posted by ScottInTexas View Post
    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…

  • #5
    Regular Coder
    Join Date
    Nov 2002
    Posts
    567
    Thanks
    2
    Thanked 4 Times in 4 Posts
    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.
    Scott Stewart
    Always happy to learn from pros.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •