PDA

View Full Version : padding-right not working, flush to edge



vbjunks
Mar 4th, 2012, 01:38 AM
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:


#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;
}

vbjunks
Mar 4th, 2012, 02:12 AM
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.

ARCLite Studio
Mar 4th, 2012, 02:16 AM
<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:

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


you should be fine from there.

vbjunks
Mar 4th, 2012, 02:35 AM
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?

vbjunks
Mar 4th, 2012, 03:30 AM
Anyone else have any ideas?

vbjunks
Mar 4th, 2012, 08:55 PM
$10 via paypal if anyone can point me in the right direction?

Lerura
Mar 4th, 2012, 09:16 PM
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.

#page, .header, .footer, .body, #content, .content{

vbjunks
Mar 4th, 2012, 10:42 PM
Ahh ok, I see what you're saying.

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


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