Hi,
Just for fun you could use box-sizing (ie8+) so that padding is included in the width and do something like this.
.main {
margin: 25px 25px 0 25px;
}
img.header {
width:100%;
}
img.small {
border:0;
width: 33.33%;
padding: 25px 17px 0 0;
float:left;
-moz-box-sizing:border-box;
-ms-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
}
img.small:nth-child(4), img.small:nth-child(7) {
padding:25px 0 0 17px;
}
img.small:nth-child(3n+3) {
padding:25px 9px 0 9px;
}
It’s a bit hacky though :)
Note that your use of nth-child is incorrect and that ‘img.small:nth-child(3)’ will look for the third img that is a child and not the third image with a class of .small. It only checks the class when it finds out if its the third-child and then applies the rules if the third child has the class.
In your example the header img is the first child so you would have needed to choose 4 and 7.
