convert divs displaying as row to divs displaying as column

Question

I have as the following divs. Suppose each div is floated left or set display to inline-block.

+-----------+ +-----------+ +--------------+
|    1      | |     2     | |              |
+-----------+ |           | |      3       |
              +-----------+ |              |
                            +--------------+
+-----------+ +-----------+ +--------------+
|     4     | |     5     | |              |
+-----------+ |           | |      6       |
              +-----------+ |              |
                            +--------------+
+-----------+ +-----------+ +--------------+
|           | |    8      | |      9       |
|    7      | +-----------+ |              |
|           |               +--------------+
|           |
+-----------+

I want to achieve like this

+-------------+ +-----------+ +-------------+
|     1       | |     4     | |             |
+-------------+ +-----------+ |      7      |
+-------------+ +-----------+ |             |
|      2      | |      5    | |             |
|             | |           | +-------------+
+-------------+ +-----------+ +-------------+
+-------------+ +-----------+ |      8      | 
|             | |           | +-------------+
|       3     | |       6   + +-------------+
|             | |           | |     9       |
|             | +-----------+ |             |
+-------------+               +-------------+

I know I can do this by column-wise as this

<div class="col1">
  <div></div>
  <div></div>
  <div></div>
</div> 
<div class="col2">
  <div></div>
  <div></div>
  <div></div>
</div>
<div class="col3">
  <div></div>
  <div></div>
  <div></div>
</div>

But In my website there more pages like this, so I would like to achieve without touching markup. Is there any idea to perform this with css or any javascript/jquery method?

possible duplicate of [how to replicate pinterest.com's absolute div stacking layout](http://stackoverflow.com/questions/7109362/how-to-replicate-pinterest-coms-absolute-div-stacking-layout) — Antony, Jul 01 '13 at 03:44

Roko C. Buljan · Accepted Answer · 2013-07-01T08:57:50.573

3

Using JS and jQuery it's quite easy to turn "Mission Impossible" into "Alice in Wonderland":

LIVE DEMO

HTML sample:

<div id="cont"> 

   <div></div>
   <!-- ...more  <div></div> here ... -->

</div>

CSS sample (the .col will be added by jQuery):

#cont .col > div{
  position:relative;
  width:250px;
  background:#eee;
  margin:2px;
  padding:15px;
}

.col{
  float:left;
}

jQuery:

$(function(){

    var cells = $('#cont > div');

    for(var i = 0; i < cells.length; i+=3) {
      cells.slice(i, i+3).wrapAll("<div class='col' />");
    }

});

edited Jul 01 '13 at 08:57

answered Jul 01 '13 at 04:18

Roko C. Buljan

196,159
39
305
313

@C-Link you're welcome! :) Glad you did it! I was afraid you're stuck with the basics of jQuery... But great! – Roko C. Buljan Jul 01 '13 at 08:56
Just one thing remaining to do: There is 14 divs in my site, so I did i+5 and if it was 20 I would have done i+7 but exactly how could I do for the best that I need not to edit each time the div increases. – Bhojendra Rauniyar Jul 01 '13 at 10:48

score -1 · Answer 2 · answered Jul 01 '13 at 03:44

-1

Not touching mark-up is what makes things sticky. David DeSandro made a well working tight cascading grid system with jQuery called Masonry, it may be able to help you out with this:

http://masonry.desandro.com/

answered Jul 01 '13 at 03:44

j0sh1e

296
4
11

2

It is great that you are trying to help the asker out. However, leaving an answer with only a link can be harmful in some cases. While your answer is good now, if the link were ever to die, your answer would lose it's value. So it will be helpful if you summarize the content from the article in your answer. See [this](http://goo.gl/wQTjc) question for clarification. – Cody Guldner Jul 01 '13 at 03:45

convert divs displaying as row to divs displaying as column

2 Answers2