The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS 3 Column Responsive Images – 33.333% not working in Codepen?

  • This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
  • #157277
    Jordan Grogan

    Here’s a link to my pen:

    For some reason, I can’t get the gutters and the images to be right. The images should be 33% of the main div (with 25 px margin on each side) and the gutters should be 25px. Am I missing something easy?

    Thanks for any help. Happy thanksgiving!


    Am I missing something easy?

    Yes….three times 33.3% does equal 100% but then you are adding in margins so the width will add up to more that 100% of the total width of the wrapper.

    So…the images cannot be 33.3% wide but rather [ (100% – 100px) / 3 ]percent wide.

    You could use calc for this but that will depend on what browser support you need.



    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 {
    img.small {
      width: 33.33%;
      padding: 25px 17px 0 0;
    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.


    Will that give gutters though?


    Here is a slightly advanced sample that gives gutters “by feature” of justified text alignment.

    It gives fixed gutters by using calc as suggested by Paulie_D, and uses fluid gutter width as a fallback for browsers that don’t support calc.

Viewing 5 posts - 1 through 5 (of 5 total)
  • The forum ‘CSS’ is closed to new topics and replies.