white space after expanding floated element - html

Question

My problem is that I have this floated elements to the left. Every element has hidden subelement with some text. I want them to be next to each other (if there is space) like in this demo .
After I click on image then that subelement which is hidden will show up. It work fine with element which are on left side (like in demo) but I have problems with the right side. When I click on element on this side, there is plenty of white space in left side.
What can I do about it?
Here is my code:
HTML:
<div id="main">
<section>
<article class="articles">
<img src="http://ib1.keep4u.ru/b/070815/ef2714da63d5940bf5.jpg"/>
<section class="text">
<p>*some text*</p>
</section>
</article>
<article class="articles">
<img src="http://theconceptartblog.com/wp-content/uploads/public_html/dev3/wp-content/uploads/07/GEARS3-imgs-05.jpg"/>
<section class="text">
<p>*some text*</p>
</section>
</article>
<article class="articles">
<img src="http://blog.art21.org/wp-content/uploads/2011/08/imgs-189.jpg"/>
<section class="text">
<p>*some text*</p>
</section>
</article>
<article class="articles">
<img src="http://www.klafs.com/media/klafs/imgs-700x394_49_c1_5d_64_fee67da23384276e60644482670c3f22"/>
<section class="text">
<p>*some text*</p>
</section>
</article>
<article class="articles">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRtX4Yk1Sxew5RqlARZHKoSnePwp86PVCOpmfTkE9bGCL2Iffic"/>
<section class="text">
<p>*some text*</p>
</section>
</article>
<article class="articles">
<img src="http://89.152.245.33/DotNetNuke/Portals/SecureChains/Images/imgs.jpg"/>
</article>
</section>
</div>
CSS:
.articles {
position: relative;
float: left;
width: 49.8046875%;;
min-height: 100px;
}
.articles img {
height: 100px;
width: 100%;
}
#main {
font-size: 0;
}
p {
margin: 0;
font-size: 16px;
}
Thanks for your advice.

Answer 1

You need to specify the float of every element on the ride side. You can do this by using :nth-child(even):
.article:nth-child(even) {
float: right;
}
If you want to use more complex grid systems you need some JavaScript or use the CSS flexbox property.
If you decide to use JavaScript there are several jQuery plugins available.