CSS columns bug — 5 column count only showing 4 (with images)

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;
  }
}

Saker

I have figured out that when the browser window is greater than 1200px, column-count:7 and column-count:10 work correctly. I still need to find out why column-count:5 doesn't work. – Saker

Answer 1

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.

Saker

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)

Gratin

I think scrolls bars could be the problem, but why would Chris's example work perfectly? The only difference is that he uses PHP to populate the images. I am going to use the images that that PHP spits out and put it in the HTML directly. Testing now...ok for some reason it works. I am going to see if it is because my images are square and don't vary in height. – Saker

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 use column-count:4 instead of 5. If anyone can provide further insight into why this happens that would be great. – Saker

I get the same effect on Chris' example: only when the Firesize tells me I'm at 1219 px does the 5th column disappear. However, I do notice that the borders left and right of my Firefox window are 9 px wide, and given that two times 8 equals 18.... time to update my answer :D – Gratin

Edited my answer a little bit. Starting to think FF is living up to the W3 spec I mentioned, and is leaving out the borders of the window (as it should). Gonna wait a sec before I rush to edit my answer again :D (anyone's welcome to suggest an edit of course if you can complete the thing!) – Gratin

Answer 3

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 :)

Ordain