CODEWITHSUNDEEP
jquerycsshtml
HeavenCore
HeavenCore

Reputation: 7683

DIV stacking with floating column support based on height of container

i dont think this is possible but just thought i'd ask as a last resort

Lets take a simple example, lets say you have some DIV's stacked on top of each other as follows using display:block

XXXXXXXXXXX1
XXXXXXXXXXX2
XXXXXXXXXXX3
XXXXXXXXXXX4
XXXXXXXXXXX5
XXXXXXXXXXX6
XXXXXXXXXXX7
XXXXXXXXXXX8
XXXXXXXXXXX9
XXXXXXXXXX10
XXXXXXXXXX11
XXXXXXXXXX12
XXXXXXXXXX13
XXXXXXXXXX14

How would one make it so that if the variable number of stacked divs was taller than the height of its container that they would wrap in column form from left to right? for example:

XXXXXXXXXXX1    XXXXXXXXXXX6    XXXXXXXXXX11
XXXXXXXXXXX2    XXXXXXXXXXX7    XXXXXXXXXX12
XXXXXXXXXXX3    XXXXXXXXXXX8    XXXXXXXXXX13
XXXXXXXXXXX4    XXXXXXXXXXX9    XXXXXXXXXX14
XXXXXXXXXXX5    XXXXXXXXXX10

I would need each div to move independently, so using container divs acting as columns isnt really possible or graceful short of forcing no-wrap of the divs and allowing horizontal scrolling on the container?

I suppose in a lot of ways this would be the same behaviour as windows explorer when viewing items as a list.

Now, i realise there are a few CSS3 properties that would help with this - but i'd like to see if there is a cross-browser way of doing it, whether that be in pure CSS or jquery etc.

I welcome your thoughts.

Regards

J.

Upvotes: 1

Views: 402

Answers (1)

Dominic Green
Dominic Green

Reputation: 10258

So looking at what you need you can use jquery to accomplish this

An example is here http://jsfiddle.net/h8Bqw/4/

var height = $(".container").height();
var count = 1;
$(".outPut").append("<div class='row r"+count+"'></div>");

$(".container div").each(function(index) {
    $(".r"+count).append($(this));


     if($(".r"+count).height() > height){
         count++;
         $(".r"+count).remove($(this));
        $(".outPut").append("<div class='row r"+count+"'></div>");
        $(".r"+count).append($(this));
        }

Upvotes: 2

Related Questions