Question

Okay so I have been trying to get a div system to work as a grid and also margins to work with that as well. I need the last div in the grid to NOT have a margin. As you can see in my jsfiddle here: http://jsfiddle.net/kyFBr/, the last div has a margin to the right.

I can’t simply use a different class for the last div that says “Picture four” because eventually this data will be pulled out of a database and I need the formatting to when that div changes position and another one appears in its place.

For the grid squares, I can only use the class “grid1”.

The div that all the grid squares are contained in use this as the css:

div.events {
    width: 970px;
    margin-left: auto;
    margin-right: auto; 
    text-align: left;   
}

And the grid’s css is:

div.grid1 {
width: 219.5px;
    margin-right: 3px;
    float: left;
    padding:10px;
    background-image: url('debut_dark.png'); /*Image From SubtlePatterns.com*/
    margin-bottom: 3px;
}

Anyone have a solution? Thanks.

Answer 1

The problem you are experiencing is a result of CSS’s inability to count until the more recent CSS level 3 properties. The one you need is :nth-child and specifically :nth-child(4n) (the n represents every 4th and not just the 4th)

div.grid1:nth-child(4n) {
    margin-right:0px;
}

Demo: http://jsfiddle.net/tvx7m/2/show
Source: http://jsfiddle.net/tvx7m/2

This solution, of course, only works on modern browsers that support CSS level 3.

Real credit goes to @Frederik (make an answer and I’ll delete mine)