Reply To: 3 Column Responsive Images – 33.333% not working in Codepen?

[paulob]

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.