0

I load dynamic number of divs ( variable height ) into parent div. I'd need to load them as follows:

----parent div ------
-div1-  -div5-
-div2-  -div6-
-div3-  -div7-
-div4-  -div8-
---------------------

When I use float:left they stack up the way i don't want:

-div1- -div2-
-div3- -div4-
-div5- -div6-

Any ideas? Can I use js to detect overflowing div?

phpJs
  • 432
  • 1
  • 4
  • 23
  • You add add two containers in parent div as .left and .right and while inserting the even or odd divs , u can consider which container to put into , like append all even divs in .left and odd divs in .right . – Kiran Ruth R Jul 10 '13 at 03:27

2 Answers2

0

jsFiddle Demo

Add another div in there to emulate the columns

----parent div ------
--sub-- | --sub--
 -div1- | -div5-
 -div2- | -div6-
 -div3- | -div7-
 -div4- | -div8-
------- | -------
---------------------
Travis J
  • 81,153
  • 41
  • 202
  • 273
0

If you are targeting only modern browsers

A flexbox is perfect for this:

HTML :

<div class="parentDiv"></div>

CSS: (Works for chrome. Use relevant prefixes -ms -moz -o as required)

.parentDiv{
    display:-webkit-flex;
    -webkit-flex-flow: column wrap; 
    width : 60px;
    height: 100px
}
.parentDiv div{
    width:20px;
    height:24px;
}

JS / JQUERY:

$(function() {       
    for(var i=1; i<7; i++)  $(".parentDiv").append($("<div>").text("div"+i));
});

DEMO

loxxy
  • 12,990
  • 2
  • 25
  • 56
  • Hm flexbox, haven't heard of that so that is cool to see something new to me. Just for reference, here are the environments which support it: http://caniuse.com/#search=flex – Travis J Jul 10 '13 at 03:36
  • It's introduced with HTML5. It will be supported in HTML5 complaint browsers only... – loxxy Jul 10 '13 at 03:38
  • Some poor souls still have to support older browsers :P Just trying to be transparent. – Travis J Jul 10 '13 at 03:39
  • True. Edited my answer to remind this. :) thanks – loxxy Jul 10 '13 at 03:40