Thread: Right padding

    #1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2013
    Posts
    23
    Rep Power
    0

    Right padding


    Hi all,

    I'm new to CSS and I'm having some trouble with right padding.

    Have a look at my site:

    http://wecloudforyou.com/

    You will see that I've added a border to the 'resources' paragraph.

    However, the right padding, goes all the way to the right side of the page. I want the right padding to be just like the left one, where there's only a few pixels between the content and the border.

    I've used the 'padding-right' attribute but no matter what I do, it keeps extending to the very right side of the page. The paragraph in question has the custom class called 'resources'.

    You can see the CSS file here:

    http://wecloudforyou.com/css/wecloud.css

    Code:
    .resources{
        border-color: black;
        border-width: medium;
        border-style: solid;
        background-color: #99FF99;
        padding: 25px;
        margin: 25px;
        padding-right: 25px;
    }
    How can I change this? Thank you very much
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Oct 2009
    Location
    Nebraska, USA
    Posts
    872
    Rep Power
    275
    The problem isn't your padding, its the fact that its defaulting to using a 100% width and then applying the padding/margin accordingly.

    So, either setup a wrapper/containing DIV and set a specific width for it to hold the contents to a certain width....or, apply a width property to your <p> tags to keep them from going over a certain width....[or if anyone else has better option, please chime in.]
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2013
    Posts
    23
    Rep Power
    0
    Thanks, I changed the width of the paragraph and was able to achieve what I was looking for.

IMN logo majestic logo threadwatch logo seochat tools logo