I would like to create a grid of images, and I've met with what I think must be the most mon 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)

I would like to create a grid of images, and I've met with what I think must be the most mon 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)

• php
• javascript
• html
• css
• grid

• Sorry it was a typo fixed in a minute, now its fixed. What I want is (for example) to put 3 columns 100 pixel wide images with 10 pixels between them into one div of 320 pixel. The point is that I want the outside div to be 320 pixel instead of 330 pixel wide. – hyperknot Commented Apr 18, 2011 at 3:38
• You mean like this but without the padding around the container? – No Results Found Commented Apr 18, 2011 at 3:53
• The link is still down I'm afraid, if I can see the actual problem I may offer a CSS trick. – Khez Commented Apr 18, 2011 at 3:55
• Yes, thats what I wanted and the jsfiddle in your answer is exactly that. – hyperknot Commented Apr 18, 2011 at 10:17

3 Answers 3

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

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 patibility. You can read more about it here and check the patibility 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.

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