123
-=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- (c) WidthPadding Industries 1987 0|705|0 -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=-
Socoder -> Web Development -> HELP CSS Flowing Columns

Tue, 17 Feb 2009, 10:37
garand
Hey All,

I need some help with a basic layout that allows divs to continue vertically down until the container div ends and then the next one wraps to the next column. The ammount of columns should be determined by the width an height of a container div. Any one have any ideas?



- Garand
Tue, 17 Feb 2009, 10:47
Jayenkai
I've never managed it myself.
I'm sure it's doable, but.. meh.. what can you do.. Sometime's you gotta do things the hard way.

Assuming it's PHP, bundle the data into an array, and pop out the results the old fashioned way..

Possibly inaccurate, more than likely wrong, quickly typed example


-=-=-
''Load, Next List!''
Tue, 17 Feb 2009, 16:17
garand
Not exactly jay.

Heres another visual example:

www.anthonygarand.com/projects/prompt/page_wrong.php

I need those boxes to be able to flow like it is in the "View Right" one without the extra column div's.
Tue, 17 Feb 2009, 19:03
Jayenkai
Indeed, hadn't realised they'd be multi-sized objects, so you'd need slightly better filtering.
Um..
If you know what size each thing is, you could still do it manually, but.. Whether those objects would appear on the user's side, at those sizes.. that's a different thing altogether.


What about "Real" columns? Like a DTP would do?
Can html do that? I'm not sure why not, I mean, it does everything else, right?

|edit| Or Javascript.. You could always cheat and do it that way.. |edit|

-=-=-
''Load, Next List!''
Fri, 20 Feb 2009, 08:46
garand
I finally figured it out. I used PHP to calculate the length of the items, add them together, and see if that is more than what each column can hold. If it is, it will make another column. Fancy huh.
Fri, 20 Feb 2009, 08:48
Jayenkai
Cool..

But only if you're sure the items will look the same size for everyone..
Remember, some folk have their views zoomed in, 'cos they have really big screens!

-=-=-
''Load, Next List!''
Sun, 22 Feb 2009, 11:14
Scherererer
Here ya' go, using CSS:



-=-=-
YouTube Twitter
Computer Science Series: Logic (pt1) (part 2) (part 3) 2's Complement Mathematics: Basic Differential Calculus
Mon, 23 Feb 2009, 06:07
garand
I had to get them to flow vertically... not horizontally.