Welcome to WebmasterWorld Guest from 23.22.182.29

Forum Moderators: not2easy

Message Too Old, No Replies

setting padding-right but nothing changes

     
10:40 pm on Mar 4, 2012 (gmt 0)

New User

5+ Year Member

joined:Nov 8, 2008
posts: 19
votes: 0


Hiya fellas, a bit confused on this one! The left padding on my content div is working fine but when I try to set the padding-right nothing changes, my text still is flush with the right edge of my container. In fact, the text extends a hair beyond the edge. Any ideas? If I can provide better info plz lemme know.


css in question:

#page .header .footer .body #content .content{
width:800px;
min-height:800px;
background-image:url('images/bg-inner-page.jpg');
background-repeat:repeat-y;
float:left;
padding-top:20px;
padding-left:30px;
padding-right:30px;
overflow:hidden;
}


html on the page:

<div id="content">
<div class="content">


<h1>Example Header</h1>

<h3>Example ANALYSIS</h2>
<p>example text example text example text example text example text example text example text example text example text example text example text example text example text example text.</p> etc.........

[edited by: alt131 at 11:01 pm (utc) on Mar 4, 2012]
[edit reason] Examplifying [/edit]

11:17 pm on Mar 4, 2012 (gmt 0)

New User

5+ Year Member

joined:Nov 8, 2008
posts: 19
votes: 0


Can anyone think of any circumstances where the padding-right would not work and my text extends all the way to the edge of the container?

[edited by: alt131 at 11:36 am (utc) on Mar 6, 2012]
[edit reason] Thread Tidy [/edit]

2:53 am on Mar 5, 2012 (gmt 0)

Moderator This Forum from US 

WebmasterWorld Administrator 5+ Year Member Top Contributors Of The Month

joined:Dec 27, 2006
posts: 2570
votes: 48


... right off the bat - your background image has the same padding so it won't extend past the end of the text. If you use an outline tool does it show that the container actually ends 30 px past your content? If you don't use tools for outlining, try adding a border to the div to see if that is the problem?

[edited by: alt131 at 11:21 am (utc) on Mar 6, 2012]
[edit reason] Thread Tidy [/edit]

3:04 am on Mar 5, 2012 (gmt 0)

New User

joined:Mar 5, 2012
posts:2
votes: 0


As i got :
Just you should set the width of that div and then set padding left and padding right....Do set the width of that div like:

div{
width:.......px
padding-left:.........px
padding-right:......px
}
3:19 am on Mar 5, 2012 (gmt 0)

New User

5+ Year Member

joined:Nov 8, 2008
posts: 19
votes: 0


not2easy, thanks for that tip! I hadn't thought of setting a border to see where the div ends. If nothing else this is certainly helping me troubleshoot the issue.

I can at least see what the div is doing when I set the padding. When I set a padding it seems to increase the width of the div automatically for some reason instead of leaving it fixed at 800px like I set it in the css.
4:36 am on Mar 5, 2012 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time Top Contributors Of The Month

joined:Apr 9, 2011
posts:12717
votes: 244


The padding is in addition to the stated width of the element. So's the border, if you've got one.

Here:

[w3.org...]

The picture is at the very top of the page. The innermost box is the size you've set for your element. Everything else-- padding, border, margin-- goes outside. This is nasty and counter-intuitive, but it explains much.

I guess it makes sense if you think of the object as a person. When you put on more clothes, you don't get skinnier to compensate. The clothes make you fatter.