[PHP+?] Flowing content through multiple columns.

[Cask]

Hey guys. I've kind of hit a brick wall with my website layout idea. I don't know the actual term for it but I'll explain my situation and I'd appreciate any sort of feedback on how to begin a solution.


What I'm talking about/wanting to do:
Inside a div with a fixed width/height (height is browser window height) I have another 4 divs displayed inline (side-by-side/floated) as columns.


Inside these will be smaller divs with content based on different categories but the content will always change so the heights of each of these divs will be different every time so fixed widths are out of the question.


What I want it to do is say, in column1, if there is more content than column1 can handle, it should overflow into column2.


To give you more information I'll be pulling active livestreams from certain websites using their APIs and I want to display which are online specific to which game the stream is listed under. It'll only display online ones so the height will be different all the time.


Here is what I'm thinking of: http://i.imgur.com/mpjPA.png


Thanks in advance for any feedback or tips and if you'd like more information let me know and I'll do my best to show it.

 

[jMerliN]

Unless you know the height of each element to be added, you'll have to do some ugly hacks with overflow. When an element overflows, you'd need to remove the last child of one column and insert it as the first child of the next column, and repeat until there is no overflow.

Also, this is going to require Javascript, not PHP.

 

[Cask]

Unless you know the height of each element to be added, you'll have to do some ugly hacks with overflow. When an element overflows, you'd need to remove the last child of one column and insert it as the first child of the next column, and repeat until there is no overflow.

Also, this is going to require Javascript, not PHP.

Ah yes I kind of understand you. Do you know of anything I can read or any examples I could check out before I start on it? And yeah I knew it wasn't going to be just PHP hence the "+?" as I didn't know what else I was going to have to use. Thank you!

Edit:
After checking out some information I've got some kind of idea about how to do it. I'm going to fiddle around with it now. Thanks for giving me some direction I'll update if I succeed or have anything else to add.

 

[jMerliN]

Edit this Fiddle - jsFiddle

 

[Cask]

Edit this Fiddle - jsFiddle

Oh awesome! Thanks heaps man.