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

You can simply use the CSS columns, without changing much of your code:

div.wrap {
    width: 100%;
    height: 300px;    
    -webkit-column-width: 100px; 
       -moz-column-width: 100px; 
            column-width: 100px;
    -webkit-column-gap: 16px;
       -moz-column-gap: 16px;
            column-gap: 16px;
}

Check this fiddle: http://jsfiddle.net/Be9B3/

Answer 2

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('<div style="float:left"></div>');
});

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('<div class="results-column"></div>');
    });
}).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.

Answer 3

You can do this with display:flex

Check the forked codepen demo: http://codepen.io/surjithctly/pen/zolcF

Read more here

HTML

<ul class="flex-container">
  <li class="flex-item">1</li>
  <li class="flex-item">2</li>
  <li class="flex-item">3</li>
  <li class="flex-item">4</li>
  <li class="flex-item">5</li>
  <li class="flex-item">6</li>
</ul>

CSS

.flex-container {
  padding: 0;
  margin: 0;
  list-style: none;
  max-height:600px;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;

  -webkit-flex-flow: column wrap;
  justify-content: space-around;
}

.flex-item {
  background: tomato;
  padding: 5px;
  width: 200px;
  height: 150px;
  margin-top: 10px;

  line-height: 150px;
  color: white;
  font-weight: bold;
  font-size: 3em;
  text-align: center;
}

Answer 4

Flexbox will be a JavaScript-less solution:

#wrap1 {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
}

Demo: http://jsfiddle.net/4wuJz/5/