Несколько столбцов разрывается, когда я ставлю IMG

Question

У меня есть 5 мультиколонок, которые имеют прокручиваемый список событий.Проблема в том, что когда я помещаю картинки в столбец, остальные столбцы попадают под него.Я пробовал какое-то решение для clearfix, но оно не работает.

Можете ли вы мне помочь, пожалуйста?

Вот jsfiddle без картинок - я поставил CSS рядом (я хочу, чтобы он работал так, но скартинки, а не с текстом) - https://jsfiddle.net/u849yzn3/15/

А вот что происходит, когда я помещаю картинку - https://jsfiddle.net/georgeSohan/7puf3z9m/4/

Вот HTML

<div id="main" class="clearfix">

    <div class="scroll-class columnScroll clearfix" id="scroll">

    <div class="imgWrap clearfix"><img src="images/0-i6"> </div>
        <div class="imgWrap clearfix"><img src="images/0-i6.jpg"</div>
        <div class="imgWrap clearfix"><img src="images/0portrait.jpg"</div>


    </div>



    <div class="columnScroll clearfix"><p> Some Text</p></div>
    <div class="columnScroll clearfix"><p> Some text</p></div>
    <div class="columnScroll clearfix"><p> Some text</p></div>
    <div class="columnScroll clearfix"><p> Some text</p></div>

</div>

Спасибо!