setting padding-right but nothing changes

[QLifeTilt]

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]

[QLifeTilt]

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]

[not2easy]

... 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]

[mayankraj55]

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
}

[QLifeTilt]

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.

[lucy24]

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.