4 side-by-side DIV's not aligning as 3 side-by-side DIV's on smaller screens

Question

Alright, I'll try to make this as clear as possible.

I have 4 DIV's next to each other when the page is full-width. Below that there are another 4 DIV's with the same size and everything like this:
| | | |
| | | |
When making the screen smaller, the DIV on the right should go down so there would be 3 DIV's next to each other, and 3 DIV's next to each other below that etc. like this:
| | |
| | |
Now for some reason this won't work properly, the DIV does go down, but stands on the right of the screen like this:
| | |
    |
| | |
    |

Below the code being used:

<div class="cblock highlights i2three-highlights-news" id="">
<div class="inner clearfix">
    <div class="highlight"  id="">
        <div class="el-inner">
            <div class="desc-news">
                <div class="image-news"><a href="newsdetail.php"><img src="images/newsholder.png" alt="" /></a></div>
                <div class="title">Vacature medewerker webshop</div>
                <div class="text"><p> and St. Maarten.&nbsp;</p>                    <div class="learn-more-news">LEARN MORE</div>
                </div>
            </div>
        </div>
    </div>
    <div class="highlight"  id="">
        <div class="el-inner">
            <div class="desc-news">
                <div class="image-news"><a href="newsdetail.php"><img src="images/newsholder.png" alt="" /></a></div>
                <div class="title">Bay West Racingteam in action at the ESSF 2014</div>
                <div class="text"><p> and St. Maarten.&nbsp;</p>
                <div class="learn-more-news">LEARN MORE</div>
                </div>
            </div>
        </div>
    </div>
    <div class="highlight"  id="">
        <div class="el-inner">
            <div class="desc-news">
                <div class="image-news"><a href="newsdetail.php"><img src="images/newsholder.png" alt="" /></a></div>
                <div class="title">Vacature medewerker debiteurenbeheer</div>
                <div class="text"><p> and St. Maarten.&nbsp;</p>                    <div class="learn-more-news">LEARN MORE</div>
                </div>
            </div>
        </div>
    </div>
    <div class="highlight"  id="">
        <div class="el-inner">
            <div class="desc-news">
                <div class="image-news"><a href="newsdetail.php"><img src="images/newsholder.png" alt="" /></a></div>
                <div class="title">Vacature medewerker webshop</div>
                <div class="text"><p> and St. Maarten.&nbsp;</p>                    <div class="learn-more-news">LEARN MORE</div>
                </div>
            </div>
        </div>
    </div>
</div>

Don't mind the "ID's", they aren't used right now. Below the CSS being used:

.highlights .highlight {
    float: left;
    text-align: center;}

.i2three-highlights-news {margin: auto; width:90%; background-color:white;}
.i2three-highlights-news .highlight {width: 300px; margin-left: 10px;}
.i2three-highlights-news .highlight:first-child {margin-left: 0;}
.i2three-highlights-news .highlight .el-inner {padding: 0 10px 0 0; }
.i2three-highlights-news .highlight .title, .i2three-highlights-news .highlight .title a {font-family:"Open Sans Light" 'Vollkorn', sans-serif; color: #174f6e; font-size: 24px; line-height: 1; font-weight: bold; height: 63px; margin-bottom: 20px;}
.i2three-highlights-news .highlight .title:after {width: 20px; height: 1px; display: block; content: "";  position: absolute; bottom: 0; left: 0;}
.i2three-highlights-news .highlight .text a {font-size: 15px; line-height: 21px; margin: 0 0 20px; color: #3e4856}
.highlights .highlight .image-news{width:auto; height:auto; margin-left:auto; margin-right:auto; margin-bottom:5%; border:1px solid #d1e6f7}
.hightlights .hightlight .extra-images-product{width:50px; height:50px; background-color:red;}
.extra-img{float:left; margin-left:13%;margin-top:5%;margin-bottom:5%;}
.desc-news {width:300px; height:auto; margin:auto; margin-bottom:10%;}
.highlights-news{ color: #00376D;display:block; width:100%; margin-bottom:2%;}
.learn-more-news{text-decoration:underline;}

I hope this makes the question clear, any help would be appreciated!

Answer 1

The problem is due to inconsistent height of the column blocks, Just add this js code in your file, what this will do, it will equalize all the columns height based on the height of biggest column as per its content.

This works for me well, hope it will resolve your issue.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<script>
    $(document).ready(function(){

    var highestBox = 0;
        $('.highlights .highlight').each(function(){  
                if($(this).height() > highestBox){  
                highestBox = $(this).height();  
        }
    });    
    $('.highlights .highlight').height(highestBox);

});
</script>