homepage Welcome to WebmasterWorld Guest from 54.161.202.106
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
setting padding-right but nothing changes
QLifeTilt




msg:4424825
 10:40 pm on Mar 4, 2012 (gmt 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]

 

QLifeTilt




msg:4424831
 11:17 pm on Mar 4, 2012 (gmt 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]

not2easy




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

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




msg:4424864
 3:04 am on Mar 5, 2012 (gmt 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
}

QLifeTilt




msg:4424866
 3:19 am on Mar 5, 2012 (gmt 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.

lucy24




msg:4424878
 4:36 am on Mar 5, 2012 (gmt 0)

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.

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