Padding Problem

[Alec]

Hi all.

I’m very new to using CSS and have only rudimentury level HTML and PHP skills but I’m very used to C++/C# so I’m quite technical.

My problem is that I’ve made a website based on the tutorial from this site and I’m dynamically linking to my wordpress blog using the following code;

Code:

by: on

This successfully displays the latest 3 blog entries no problem, my problem is when I attempt to display them with their own individual backgrounds based on the div id "blog-padding".

What I want to happen is this;

[img]http://i30.tinypic.com/21ahf1y.jpg[/img]

However when I add even 1 pixel of padding… this happens:

[img]http://i31.tinypic.com/34eq9lg.jpg[/img]

Just in-case its relevent… here is the div code;

Code:

#blog-padding{
width: 800px;
background: #666666;
padding: 1px;
}

[EamonnMac]

At first glance, it’s not padding you need, it’s margin (margin-top, in this case). Padding is an internal (i.e. inside the div) measurement, while margin is an external ‘push away from X’ value. Try

Code:

#blog-padding{
width: 800px;
background: #666666;
margin: 10px 0 0 0;
}

To get the text away from the edges as well you could change it to

Code:

#blog-padding{
width: 780px;
background: #666666;
margin: 10px 0 0 0;
padding: 10px;
}

Note how ‘padding: 10px’ adds 10px of internal space to the div to all four sides: top, right, bottom and left. Therefore, to keep the width static, I’ve reduced it to 780px to allow for 10px padding on the left and another 10px on the right…

Hope this helps.

[Author]

Posts