CSS columns bug — 5 column count only showing 4 (w

Question

I am trying to implement Chris Coyier's example of using CSS columns to create a seamless responsive grid of images.

I put Chris's files onto my server and everything looked fine. The only thing I changed was the actual images.

Now, as you see on my test page, there are only 4 columns of images instead of the specified 5, using column-count:5;. The fifth column is just whitespace with no content.

This only happens when the browser window is greater than 1200px. When the browser window is less than 1200px, the media queries kick in and decreases the column count 4, 3, 2, and finally 1. In other words, this bug only happens when the column-count: is 5 and up

This happens in FF 10, Chrome 17+, and Safari 5+.

Any help would be appreciated!

Here is the trimmed HTML:

<section id="photos">

        <img src="images/iso_o.jpg" alt="Isometric"  />

        <img src="images/iso_o.jpg" alt="Isometric"  />

        <img src="images/iso_o.jpg" alt="Isometric"  />

        <img src="images/iso_o.jpg" alt="Isometric"  />

        <img src="images/iso_o.jpg" alt="Isometric"  />

        <img src="images/iso_o.jpg" alt="Isometric"  />

        ...                     

</section>

Here is the untouched CSS:

* { margin: 0; padding: 0; }

#photos {
   /* Prevent vertical gaps */
   line-height: 0;

   -webkit-column-count: 5;
   -webkit-column-gap:   0px;
   -moz-column-count:    5;
   -moz-column-gap:      0px;
   column-count:         5;
   column-gap:           0px;

}
#photos img {
  /* Just in case there are inline attributes */
  width: 100% !important;
  height: auto !important;
}

@media (max-width: 1200px) {
  #photos {
  -moz-column-count:    4;
  -webkit-column-count: 4;
  column-count:         4;
  }
}
@media (max-width: 1000px) {
  #photos {
  -moz-column-count:    3;
  -webkit-column-count: 3;
  column-count:         3;
  }
}
@media (max-width: 800px) {
  #photos {
  -moz-column-count:    2;
  -webkit-column-count: 2;
  column-count:         2;
  }
}
@media (max-width: 400px) {
  #photos {
  -moz-column-count:    1;
  -webkit-column-count: 1;
  column-count:         1;
  }
}

Answer 1

Just in case any one else finds this in their search results it's the fact the images are inline so they have a some space between them see:

How can I eliminate spacing between inline elements in CSS?

I use the font-size: 0 on the section to fix this :)

Answer 2

When my browser hits 1219 px wide (at least as Firesize tells me) I get 5 cols. Below that I get 4 as well. Firefox 10.

Some things that may be going on:

• My vertical scrollbar is exactly 19 px wide
• The border left and right of the Firefox window are 9 px each, making 18px total

It almost seems as one of these is being included in the media query.

---

Edit: kinda weird though, because at first glance the W3 media queries site seems to suggest that:

The ‘width’ media feature describes the width of the targeted display area of the output device. For continuous media, this is the width of the viewport (as described by CSS2, section 9.1.1 [CSS21]) including the size of a rendered scroll bar (if any)

Answer 3

Ok I have an answer, although it is a workaround, not a fix. I changed up the images so that some were 300px in height and others, 370px. Basically I varied the the height of the images and kept the width of all the images the same, 300px. So the answer is to either not use square images, or if you want to use all square images, use column-count:4 instead of 5.

If anyone can provide further insight into why this happens that would be great.