Inner padding in a gallery of images

So, I have this gallery function that just shows images in a grid. I am currently using TABLE, but I want to move over to CSS in order to use width 100% on the images, so it scales nicely.

Right, so best explained by looking at this page: http://sandman.net/test/css_gallery.php

The blue border is on the outer DIV and the images are kept within to layers of DIV's. The code looks something like this:

<div class="thumbs">
    <div class="thumb">
        <div class="inner">
            <img />
        </div>
    </div>
    <div class="thumb">
        <div class="inner">
            <img />
        </div>
    </div>
</div>

And so on. And the stylesheets are currently this:

<style type='text/css'>
    .thumbs {
        width: 400px;
        border: 1px solid blue;
        overflow: hidden;
    }
    .thumb {
        w开发者_开发问答idth: 25%;
        float: left;
    }
    .thumb > .inner {
        padding: 0 10px 10px 0;
    }
</style>

SO - to my problem. As you can see, the padding is currently 10px, which it should be. But not on the fourth column!! Basically, I want the images to be four columns with three whitespace columns in between. As they are now, each .thumb contains an image with 90px width calculated and 10px padding to the right. But, they should instead be 92.5 pixels wide and be evenly spaced.

Because - one problem is that I can't sett different margins on the first three and the fourth column since then the 100% width image would change size, which is not desirable. So the padding has to somehow be applied uniformly over all the images.

So, do you have a good way to do it? :)

You can also add a container div in tumbs div that contains all the tumb divs and give this container a negative margin to compensate for the padding on the edges of the thumb divs, not a beautiful solution but it works in all browsers, even that one that rhymes with nternet xplorer. :)

<div class="thumbs">
  <div class="container">
    <div class="thumb">
        <div class="inner">
            <img />
        </div>
    </div>
    <div class="thumb">
        <div class="inner">
            <img />
        </div>
    </div>
  </div> <!--container-->
</div>

<style type='text/css'>
    .container {
    margin: 0 -10px 0 -10px;
    }
</style>

Okay, so the simplest fix that I can see is to use just 1 more div and a tiny CSS tweak. Wrap the div.thumbs in another div, like this:

<div class="thumbs-wrapper">
    <div class="thumbs>
        <!-- same content here as before -->
    </div>
</div>

and move the border off the div.thumbs, onto the new wrapper:

.thumbs-wrapper {
    border: 1px solid blue;
    overflow: hidden;
    width: 390px; /* cuts off the pesky extra padding */
}

.thumbs {
    width: 400px;
}

The rest of the CSS is unchanged. The result:

No point in using esoteric pseudo-classes... just make your own!

First of all, I'd just set a class to the image directly... no need to have a container on each image. I also think 'margin' is a smarter choice than 'padding,' so the HTML I end up with looks like:

<div class="thumbs">
    <div class="thumb">
        <img class="inner first" src="" />
    </div>
    <div class="thumb">
        <img class="inner" src="" />
    </div>
    <div class="thumb">
        <img class="inner" src="" />
    </div>
    <div class="thumb">
        <img class="inner last" src="" />
    </div>
    <div class="thumb">
        <img class="inner first" src="" />
    </div>
    <div class="thumb">
        <img class="inner" src="" />
    </div>
    <div class="thumb">
        <img class="inner" src="" />
    </div>
    <div class="thumb">
        <img class="inner last" src="" />
    </div>
</div>

etc...

Your math I assume is: (400px wide) - (3 x 10px margin) = 370px / 4 columns = 92.5 px per column... but typically you don't want to work with half of a pixel so I'll use 92px per column, with 368px total width after margins. So then, since you're setting up your own classes for first and last--your stylesheet should look something like:

    .thumbs {
        width: 398px; // 368px + 30px for margin
        border: 1px solid blue; // 1px for each side, results in a total width of 400px
        overflow: hidden;
    }
    .thumb {
        width : 92px;
        float : left;
    }
    .inner {
        width : 92px;
        margin : 0 10px 10px 10px;
    }
    .first {
        margin : 0 10px 10px 0!important; //important should make sure it overrides        .inner
    }
    .last {
        margin : 0 0 10px 10px!important; //important should make sure it overrides .inner
    }

Now, I haven't tested this but I think it should work... if nothing else, hopefully my strategy is insightful so that you could tailor it to your needs. You could apply the same theory of manually assigning and stacking classes to make sure the top and bottom rows both have 10px on top and bottom respectively.

Hope this helps!