4 side by side div, not leveling like 3 side by side div on smaller screens

Question

Well, I will try to make it as clear as possible.

I have 4 divs next to each other when the page is full. Below that there are 4 more DIVs with the same size and all that:
| | | |
| | | |
When the screen size is smaller, the DIV on the right should drop, so there will be 3 DIV between them, and 3 DIV next to each other below, etc., For example:
| | |
| | |
Now, for some reason, this will not work as expected, the DIV will actually drop, but it will appear to the right of the screen as follows:
| | |
|
| | |
|

Below code 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> 

Do not pay attention to the "ID", they are not used right now. Below CSS 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 puts the question clearly, any help will be appreciated!

Answer 1

The problem is with inconsistent column block heights. Just add this js code to your file, what will it do, it will align all column heights based on the height of the largest column according to its contents.

This works well for me, hope this solves your problem.

 <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>