Grow your CSS skills. Land your dream job.

Padding Problem

  • # July 26, 2009 at 5:28 pm

    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:
    < ?php $posts = query_posts('showposts=3'); foreach ($posts as $post) : start_wp(); ?>

    < ?php the_title(); ?>

    < ?php the_content(); ?>

    < ?php endforeach; ?>

    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;
    }
    # July 26, 2009 at 8:13 pm

    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.

    # July 27, 2009 at 7:00 am

    Just to add to what Eamonn said, looking at your code you are going to end up with multiple instances of <div id="blog-padding"> on the page. Id’s should be unique, once per page. Try changing it to <div class="blog-padding"> and alter the css to reflect that.

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".