Weird floated blocks wrapping in bootstrap 3 col-* divs list

Question

Basically I have bunch square of twitter-bootstrap col-md-x, col-sm-x divs one after another, to create list of images. It works almost flawlesly. Except that in some cases (which I could not figure out) it wraps last item to next row and previous item floats to the right. While from my best knowledge should float:left as it is stated in code?

Also:

All blocks have same height
Migration to v4 is no on option, as I have also 200 other widgets :)
nth selector will not works as number of columns depend on screen size

I've tried adding clearfixes inside blocks, as well rebuilding this all from inline-blocks. Also tried with table-like displays to no avail. Adding .rows is not an option, as it have different number of columns for different screen resolutions.

It works same way on latest FF and Chrome.

Code with blocks emptied for cleaner view, and only last block containing actual thumbnails code:

<div class="maslosoft-gallery-thumbs">
    <div class="col-lg-6 col-md-6 col-sm-3 col-xs-6 maslosoft-gallery-thumbs-group">...</div>
    <div class="col-lg-6 col-md-6 col-sm-3 col-xs-6 maslosoft-gallery-thumbs-group">...</div>
    <div class="col-lg-6 col-md-6 col-sm-3 col-xs-6 maslosoft-gallery-thumbs-group">...</div>
    <div class="col-lg-6 col-md-6 col-sm-3 col-xs-6 maslosoft-gallery-thumbs-group">...</div>
    <div class="col-lg-6 col-md-6 col-sm-3 col-xs-6 maslosoft-gallery-thumbs-group">...</div>
    <div class="col-lg-6 col-md-6 col-sm-3 col-xs-6 maslosoft-gallery-thumbs-group">...</div>
    <div class="col-lg-6 col-md-6 col-sm-3 col-xs-6 maslosoft-gallery-thumbs-group">...</div>
    <div class="col-lg-6 col-md-6 col-sm-3 col-xs-6 maslosoft-gallery-thumbs-group">

        <figure class="figure img-thumbnail img-margins">
            <a class="maslosoft-gallery-image-url" href="?msg5a2edae509b0063972ebf09e.group=5a551849d0e0c30207d3bb79"
               title="" style="width: 50%">
                <img src="https://xn--masekowski-d0b.pl/asset/get/5a55174b09b0063676204b74/w/167/h/167/p/0/IMG_0961.jpg">
                <div class="img-thumbnail maslosoft-gallery-vertical-divider">
                </div>
                <div class="img-thumbnail maslosoft-gallery-horizontal-divider">
                </div>
                <div class="clearfix"></div>
            </a>
            <a class="maslosoft-gallery-image-url" href="?msg5a2edae509b0063972ebf09e.group=5a551849d0e0c30207d3bb79"
               title="" style="width: 50%">
                <img src="https://xn--masekowski-d0b.pl/asset/get/5a55183709b006f976dac73e/w/167/h/167/p/0/IMG_0962.jpg">
                <div class="img-thumbnail maslosoft-gallery-horizontal-divider">
                </div>
                <div class="clearfix"></div>
            </a>
            <a class="maslosoft-gallery-image-url" href="?msg5a2edae509b0063972ebf09e.group=5a551849d0e0c30207d3bb79"
               title="" style="width: 50%">
                <img src="https://xn--masekowski-d0b.pl/asset/get/5a55173c09b006cb73792f71/w/167/h/167/p/0/IMG_0960.jpg">
                <div class="img-thumbnail maslosoft-gallery-vertical-divider">
                </div>
                <div class="clearfix"></div>
            </a>
            <a class="maslosoft-gallery-image-url" href="?msg5a2edae509b0063972ebf09e.group=5a551849d0e0c30207d3bb79"
               title="" style="width: 50%">
                <img src="https://xn--masekowski-d0b.pl/asset/get/5a55174809b006177664196e/w/167/h/167/p/0/IMG_0954.jpg">
                <div class="clearfix"></div>
            </a>
            <div class="clearfix"></div>
        </figure>
        <div class="clearfix"></div>
    </div>
</div>

I don't know how to reproduce issue (to create fiddle). Issue can be seen here if You scroll to bottom.

I've also attached screenshot:

Please note that im offline for weekend and will not respond until monday.

https://stackoverflow.com/questions/48047690/how-to-fix-coloumn-size-during-search-method-in-html?noredirect=1&lq=1 — Temani Afif, Jan 11 '18 at 20:32
https://stackoverflow.com/questions/48024162/why-is-my-bootstrap-column-centered-instead-of-left-aligned?noredirect=1&lq=1 — Temani Afif, Jan 11 '18 at 20:33
https://stackoverflow.com/questions/48031923/my-footer-alignment — Temani Afif, Jan 11 '18 at 20:33
the best fix is to migrate to V4 of bootstrap or check the link above you will get some options — Temani Afif, Jan 11 '18 at 20:36
It may be a very slight difference but the "blocks" do no have the same height. — Zim, Jan 11 '18 at 20:51
Thanks @ZimSystem It turned out that depending on screen size, height of blocks were different by some small factor due to rounding. — PeterM, Jan 15 '18 at 16:24

score 1 · Answer 1 · answered Jan 11 '18 at 20:26

As I can see your code in your reference link, you have to set clear css property to the columns. Just paste below css in your code:

.maslosoft-gallery-thumbs-group:nth-child(odd) {
    clear: left;
}

The clear CSS property specifies whether an element can be next to floating elements that precede it or must be moved down (cleared) below them. The clear property applies to both floating and non-floating elements.

Clear CSS Documentation

Weird floated blocks wrapping in bootstrap 3 col-* divs list

1 Answers1