white space after expanding floated element

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.