0

Edit: I think I just need help understanding the column-count function, it is pretty new and I haven't found much support. What are the defaults for overflow, floating, etc? I can't seem to control these things. Whether or not my columns are flush seems almost random and depends a lot on zoom. I commented about how I think it might have something to do with the calc() function for heights and widths rounding funny on certain zooms.

So I got inspiration from Pinterest style display of images from here. When I put it into my own code, it basically works except depending on the page zoom, the middle column is not fleshed with the top of my #photo_wrapper.

Most of the time it is flesh with the top, but at some zoom levels there is a gaping amount of space. Any ideas as to how to fix this?

As you can see from my code, I've been throwing a lot of things at it and nothing brings it uniformity.

Here is a link to the image on Flickr: http://flic.kr/p/h7W2PT

Here is the CSS styling:

#photo_wrapper{
    -webkit-column-count: 3; 
    -webkit-column-gap: 10px; 
    -webkit-column-fill: auto; 
    -moz-column-count: 3; 
    -moz-column-gap: 10px; 
    -moz-column-fill: auto; 
    column-count: 3; 
    column-gap: 15px; 
    column-fill: auto;
    vertical-align: top;
}

.photo_container{
/*where all the images are stored)*/
    width: calc(100% - 10px); /*this seems to work fine*/
    margin: auto auto 5px auto;
    float: left;
    float: top;
    clear: none;

    vertical-align: top;

    display: inline-block;

    -webkit-column-break-inside: avoid;
    -moz-column-break-inside: avoid;
    column-break-inside: avoid;
}
TylerH
  • 20,799
  • 66
  • 75
  • 101
Livvy Jeffs
  • 159
  • 1
  • 1
  • 11
  • I can't help but wonder if maybe your HTML is different from the HTML on the test site. – Mr Lister Oct 31 '13 at 08:14
  • The wrapping structure is parallel, I suspect it has something to do with the fact that I use calc(100% - 10px) for many of my heights and widths which aren't supported in many browsers except for Chrome. I'll be shifting that stuff over to Javascript or jQuery soon. It is really only an issue on certain zooms, and I have issues with other things at zooms as well, as if the rounding on the calc function is off. – Livvy Jeffs Oct 31 '13 at 13:41
  • Regarding margins, I checked all my .photo_container elements for their sizes and to see if any margins or padding were causing the misalignment. Where the borders are are where the margins end, so the misalignment is likely in the column function. – Livvy Jeffs Oct 31 '13 at 13:47

0 Answers0