CSS: Set divs horizontally in 2 rows

Answer 1

For the sake of argument, let's say you can't change your document structure - you need to do this through layout definitions alone.

If you know how many items you will have, the easiest way to manage this would be CSS3 columns with inline-block elements. Your .singles are the inline-blocks, and .cont uses the 'columns' property to set 5 columns each wide enough to hold your singlets, whilst using max-height to force the inline-blocks onto new columns every two items. The singlets have a min-size large enough to stop multiple inline-blocks displaying on the same line.

You can see this effect as a jsfiddle here: http://jsfiddle.net/mwjJG/25/ :

.container {
    height: 240px;

    columns: 100px 5;
    -webkit-columns: 100px 5;
    -moz-columns: 100px 5;
    }

.single {
    display: inline-block;
    height: 100px;
    width: 100px;
    }

Do be aware this won't work on IE<10 unless you can use some kind of JS-based shiv to add support for the columns property (CSS Pie may be able to do this).