How to do CSS for a grid of images

Question

I would like to create a grid of images, and I've met with what I think must be the most common problem for a grid: namely that how to remove the margin/padding on the last elements? I was trying (without success):

#page {
margin: 0 -8px -8px 0;
}

#page a {
float: left;
margin: 0 8px 8px 0;
}

Why does this code not work? Whats the best way to solve it?

The CSS frameworks forces us to specify the last elements:

960.gs uses:

.alpha {
  margin-left: 0;
}

.omega {
  margin-right: 0;
}

BluePrint CSS uses:

.last {margin-right: 0;}

Golden Grid uses:

.inside {margin-left: 0;}

But how can I do it when all I have is a unknown list of images which I would like to put in n-columns? Before, I have written PHP code for this, and I called it with an argument for the number of columns, but there must be some very easy CSS trick for this problem!

(live page link removed, as jsfiddle examples below are much better)

Answer 1

There is most definitely a simple css/html solution to this. You shouldn't need to hardcode the style with php or do math or use javascript:

http://jsfiddle.net/Madmartigan/34UCn/5/

This may not be the best or only solution, but sometimes adding a wrapper div gives you a lot of flexibility. Here is the important part of the code I used:

HTML:

<div class="wrapper">
    <div>
        <img><img><img><img><img><img>
    </div>
</div>

CSS:

.wrapper {
    overflow:hidden;
    width:320px;
}
.wrapper div {
    /* any width up to (total img width) * (num_columns) */
    /* the rest will be chopped off by overflow:hidden */
    width:330px;

    /* chops off top "padding" of inner div (first row imgs top margin) */
    margin-top:-10px;
}
img {
    width:100px;
    height:75px;
    float:left;
    margin:10px 10px 0 0;
}

Hopefully this the effect you're looking for. This will not work with variable size images, but on your example they all appeared to be the same size. Tested in IE6, IE8 and FF4.

Answer 2

.divclass {
    width:320px;
    float:left;
}
.maincol {
    width:100px;
    border-color:transparent;
    border-style:solid;
    border-width-right:10px;
    border-width-left:0px;
    border-width-top:0px;
    border-width-bottom:0px;
    margin:0px;
    padding:0px;
}
.rightcol {
    width:100px;
    border-color:transparent;
    border-style:solid;
    border-width:0px;
    margin:0px;
    padding:0px;
}
<div class="divclass"><!--
--><img class="maincol"><img class="maincol"><img class="rightcol"><br><!--
--><img class="maincol"><img class="maincol"><img class="rightcol"><br><!--
--><img class="maincol"><img class="maincol"><img class="rightcol"><br><!--
--><img class="maincol"><img class="maincol"><img class="rightcol"><br><!--
--><img class="maincol"><img class="maincol"><img class="rightcol"><br><!--
--><img class="maincol"><img class="maincol"><img class="rightcol"><br><!--
--><img class="maincol"><img class="maincol"><img class="rightcol"><br><!--
--><img class="maincol"><img class="maincol"><img class="rightcol"><br><!--
--><img class="maincol"><img class="maincol"><img class="rightcol"><br><!--
--></div>

you want NO WHITESPACE CHARACTERS between the images! those will mess things up... I am not even sure about comments.

Answer 3

There is no simple CSS solution for this afaik. You either have to use javascript to do some math or use php as you said.

Edit: There are selector like nth-child(), but I am not sure about compatibility. You can read more about it here and check the compatibility here or just google for more ;) Actually also jQuery is using css selectors, so you can check more examples at jQuery api.

Edit2: Uh, I actually forgot, that nth-child() is useless anyway, because you don't know n. So back to my original answer: You can't do it without any scripting if you want dynamic behaviour. You could of course use that nth- selector, but only in case where you know, that you will have some known number of images in one row.