Layout and floating div problems

Question

So, I have this layout looks like this

As you can see there, the div is floating/aligned to the right side perfectly but on the left side there's a gap between it, how do I clear the gap?

DIV CSS:

.thread-list{
   width: 40%;
   background-color: #fff;
   padding: 10px;
   border-style:solid;
   border-width:1px;
   border-color:#F0F0F0;
   margin-bottom: 3px;
   margin-right: 10px;
   margin-bottom: 10px;
   overflow: auto;
   float: left;
}

NOTE: The div is showing content dynamically (from database), and I can't make the div in 2 separated columns.

Sorry, if I'm being not clear enough.

Answer 1

DEMO

If you float multiple elements & one of the div has larger height then others, then these types of effect are created (the one you showed in your screenshot).

Solution 1: clear float left from 1st element of each row using :nth-child(2n+1) in your case its ..2n.. cuz you have 2 elements in one row.

Add this css in your style-sheet:

.thread-list:nth-child(2n+1){
    clear:left;
}

Solution 2: Solution 1 will align all the div's but there will still be a negative space beneath, if you dont want that then you have to use plugins like Masonry Layout, this effect can not be achieved with pure css.