Welcome!

Join our community of MMO enthusiasts and game developers! By registering, you'll gain access to discussions on the latest developments in MMO server files and collaborate with like-minded individuals. Join us today and unlock the potential of MMO server development!

Join Today!

[PHP+?] Flowing content through multiple columns.

Skilled Illusionist
Joined
Jul 1, 2007
Messages
367
Reaction score
1
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:


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.
 
Ginger by design.
Loyal Member
Joined
Feb 15, 2007
Messages
2,339
Reaction score
652
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.
 
Skilled Illusionist
Joined
Jul 1, 2007
Messages
367
Reaction score
1
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.
 
Last edited:
Back
Top