Question

So far I have this JsFiddle – an arrangement of DIVs that using media queries changes as the width of the area reduces and maintains a layout that fits to 100% of the container width.

The problem I am having is trying to separate the DIV because the layout is percentage based.

My efforts to include a margin have so far failed to work in keeping everything perfectly formatted.

Any help here would be much appreciated.

Here is the CSS…

#photos {
   /* Prevent vertical gaps */
   line-height: 0;
   width: 100%;
}
#photos img {
  /* Just in case there are inline attributes */
  width: 20%;
  height: auto;
  float:left;
  overflow:hidden;
}

@media (max-width: 1200px) {
    #photos img {
    /* Just in case there are inline attributes */
    width: 20%;
    }
}

@media (max-width: 800px) {
    #photos img {
    /* Just in case there are inline attributes */
    width: 25%;
    }
}
@media (max-width: 400px) {
    #photos img {
    /* Just in case there are inline attributes */
    width: 50%;
    }
}
@media (max-width: 300px) {
    #photos img {
    /* Just in case there are inline attributes */
    width: 100%;
    }
}

Answer 1

if you know how many images you want to see in a row you can use percentuage for margins as well.

For example. 5 images in a row:

img { width: 15% ; margin: 0 10% 10% 0;}

img:nth-child(5n+5) { margin: 0 0 10% 0; }