How to wrap a div vertically and then horizontally

Question

I need to show the search result data in my site horizontally. I follow a metro UI approach for my website, so I want the data to flow horizontally instead of vertically.

Answer 1

Add clear: left to the .result class so your boxes are stacked vertically.

Then wrap results in blocks of 3 and float these blocks horizontally. You can do that logic with whichever back-end language you may be using to output the results markup or with jQuery:

$('.result:nth-child(3n+1)').each(function() {
    $(this).add( $(this).next().next().addBack() ).wrapAll('
');
});

Fiddle

---

Here's a more responsive solution which re-calculates on window resize: Demo.

Note: it assumes all boxes have the same height. You can hardcode a max-height in the resultHeight variable if that's not the case.

$(window).resize(function() {
    var resultHeight = $('.result:first').outerHeight(true),
        nRows = Math.floor( $('#wrap1').height() / resultHeight );

    $('.results-column').contents().unwrap();
    $('.result:nth-child('+nRows+'n+1)').each(function() {
        $(this).nextAll().slice(0, nRows-1).add(this).wrapAll('
');
    });
}).resize();

Added CSS:

#wrap1 {
    white-space: nowrap;
}
.results-column {
    display: inline-block;
    vertical-align: top;
}

---

Also check out Isotope with its cellsByColumn/fitColumns layouts.

---

And lastly, your use case is a prime example for the use of the Flexible Box Layout. I haven't mentioned this yet because there are already other answers showing this solution, and also because it is rather hard to make cross-browser at the moment:

• Firefox <= 27, IE10 and Safari <= 6 support an old version of the spec
• Newer Chrome, Safari and IE11 support the new syntax
• Can't forget all the browser prefixes!

Reference: http://caniuse.com/flexbox

Though, all is not lost yet. If you want to use Flexbox today, there's a very useful Flexbox generator.

CSS-only solution using Flexbox: Demo

#wrap1 {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-direction: normal;
    -moz-box-direction: normal;
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: start;
    -moz-box-pack: start;
    -webkit-justify-content: flex-start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-align-content: flex-start;
    -ms-flex-line-pack: start;
    align-content: flex-start;
    -webkit-box-align: start;
    -moz-box-align: start;
    -webkit-align-items: flex-start;
    -ms-flex-align: start;
    align-items: flex-start;
}

I've tested this solution and it works correctly in IE10, IE11, Chrome 31, Opera 18 and Firefox 29 Nightly.

Note: Firefox <= 27 does not support Flexbox with more than one row/column (it does not support flex-wrap: wrap). I've tested this on Firefox 29 (nightly) and it works correctly, so I believe it should land on stable soon enough.