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 8 of 8
  1. #1
    New Coder
    Join Date
    Dec 2009
    Posts
    16
    Thanks
    1
    Thanked 1 Time in 1 Post

    padding-right not working, flush to edge

    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. Any ideas? If I can provide better info plz lemme know.

    Example page of my problem: http://www.d2dpv.com/services.php
    css file: http://www.d2dpv.com/css/style.css

    css in question:

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

  • #2
    New Coder
    Join Date
    Dec 2009
    Posts
    16
    Thanks
    1
    Thanked 1 Time in 1 Post
    It seems as if it could be related to the width? When I reduce the width from 800 to say, 750 px it looks much better. But altering padding-right still doesn't seem to change anything whether the width is 800 or 750 which is odd to me.

  • #3
    New Coder
    Join Date
    Sep 2009
    Posts
    73
    Thanks
    5
    Thanked 9 Times in 9 Posts
    Code:
    <div id="content">
    <div class="content">
    1.) Find this above in your HTML
    2.) Remove class="content" from second DIV
    3.) create new class .pdright {padding-right:30px;}
    4.) change HTML to:
    Code:
    <div id="content">
    <div class="pdright">

    you should be fine from there.

  • #4
    New Coder
    Join Date
    Dec 2009
    Posts
    16
    Thanks
    1
    Thanked 1 Time in 1 Post
    Thanks for your help, that did work to an extent.

    I've narrowed the issue down to the width property in the content class. When I remove the width http://www.d2dpv.com/services.php looks good, but only because my content is pushing the container/background image all the way to the right.

    But I need to have the width set because when I remove that line, the background image doesn't stretch to the right edge on some other pages, like this one: http://www.d2dpv.com/free-estimate.php


    Shouldn't I be able to set a specific width for my content class and have the content inside be 30px from each side of the container using the padding properties?

  • #5
    New Coder
    Join Date
    Dec 2009
    Posts
    16
    Thanks
    1
    Thanked 1 Time in 1 Post
    Anyone else have any ideas?

  • #6
    New Coder
    Join Date
    Dec 2009
    Posts
    16
    Thanks
    1
    Thanked 1 Time in 1 Post
    $10 via paypal if anyone can point me in the right direction?

  • #7
    Regular Coder Lerura's Avatar
    Join Date
    Aug 2005
    Location
    Denmark
    Posts
    947
    Thanks
    0
    Thanked 130 Times in 129 Posts
    I assume that you wanna apply these rules two 6 different element.

    The way you have set it up it applies to an element
    with class="content" inside a another with id="content" and so on, all the way up to #page.

    When just separating they identifiers with spaces, it will require that the element after the space should be within the element before the space.
    and only the rightmost defined element is affected. The rest is only conditions to it placement in the DOM tree

    Thus you definition is that it should apply to .content if it is within a document tree that contains all the identified element in that order from outside and in.

    If you want to apply the rules to different elements, you have to separate the identifiers by commas.
    Code:
    #page, .header, .footer, .body, #content, .content{

  • #8
    New Coder
    Join Date
    Dec 2009
    Posts
    16
    Thanks
    1
    Thanked 1 Time in 1 Post
    Ahh ok, I see what you're saying.

    Even when I remove everything else and only make it apply to .content, ie:

    Code:
    .content{
    		   width:800px;
    		   min-height:800px;
    		   background-image:url('http://www.d2dpv.com/images/bg-inner-page.jpg');  
    	           background-repeat:repeat-y;
    		   float:left;
    		   padding-top:20px;
    		   padding-left:30px;
    		   padding-right:30px;
    		   overflow:hidden;
    		}
    It still doesn't work. All I want to do is have a specific width set for my content container and have 30px padding on the left and right sides. I'm so confused why the right padding won't work on pages like this: http://www.d2dpv.com/services.php There should be 30px padding between the end of my text and the end of the background shading.


  •  

    Tags for this Thread

    Posting Permissions

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