1

I am having problems floating 2 columns - only 2 columns not 3 columns as other questions have been posed - of images so they fit together without gaps (like masonry, but without masonry js). I keep thinking I have it working as it will work for a couple of images but not for others.

I have tried column-count, but this aligns posts down each column, I need the posts to align horizontally. Reading left to right.

It is looking like this

enter image description here

I've tried adding in clears (left/right, every nth etc all combinations) by adding in a <div class="clear"></div> after 2 images and using nth-of-type or nth-of-child etc etc but no combination I have found seems to work for every thumbnail.

Why can't I get it so every nth-of-type (for example) goes left if odd or right if even?

Here's my Fiddle

My CSS looks like this:

.container {
    width: 848px;
}
.thumbnail_small:nth-child(odd) {
    margin:0 0px 8px 8px;
    width: calc(50% - 12px);
    float:left !important;
    display:block;
}
.thumbnail_small:nth-child(even) {
    margin:0 8px 8px 0px;
    width: calc(50% - 12px);
    float:right !important;
    display:block;
}
GoldenGonaz
  • 1,116
  • 2
  • 17
  • 42
  • U can use column-count css property: http://jsfiddle.net/7637hag3/5/ – izorgor Nov 06 '15 at 13:46
  • @izorgor That isn't a solution unfortunately. I need it to read left to right, column-count aligns posts down the first column then down the next column. – GoldenGonaz Nov 06 '15 at 14:20

0 Answers0