HELP CSS Flowing Columns

-=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- (c) WidthPadding Industries 1987 0\|42\|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 Bigarray=array(); c=0; while (moredata) { Bigarray[c]=NextBit; c++; } x=0; y=0; BogStandardTable BogStandardRow for (n=0;n<c;n++) { BogStandardColumn DisplaycontentsOf(BigArray[(y)+(x*(c/3))]); /BogStandardColumn x++; if (x==3){x=0;y++; /BogStandardRow; BogStandardRow;} } /BogStandardTable --v -=-=- ''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: <html> <head> <STYLE type="text/css"> div.fldiv { background-color: #CDFFFF; padding: 10px 10px 10px 10px; margin: 10px 10px 10px 10px; float: left; } </STYLE> </head> <body> <div> <div class="fldiv">Hello, world!THIS IS A DIVIT IS DIVVABLEZOMGZOMGZOMZGOMZG</div> <div class="fldiv">Hello, world!THIS IS A DIVIT IS DIVVABLEZOMGZOMGZOMZGOMZG</div> <div class="fldiv">Hello, world!THIS IS A DIVIT IS DIVVABLEZOMGZOMGZOMZGOMZG</div> <div class="fldiv">Hello, world!THIS IS A DIVIT IS DIVVABLEZOMGZOMGZOMZGOMZG</div> <div class="fldiv">Hello, world!THIS IS A DIVIT IS DIVVABLEZOMGZOMGZOMZGOMZG</div> <div class="fldiv">Hello, world!THIS IS A DIVIT IS DIVVABLEZOMGZOMGZOMZGOMZG</div> <div class="fldiv">Hello, world!THIS IS A DIVIT IS DIVVABLEZOMGZOMGZOMZGOMZG</div> <div class="fldiv">Hello, world!THIS IS A DIVIT IS DIVVABLEZOMGZOMGZOMZGOMZG</div> <div class="fldiv">Hello, world!THIS IS A DIVIT IS DIVVABLEZOMGZOMGZOMZGOMZG</div> <div class="fldiv">Hello, world!THIS IS A DIVIT IS DIVVABLEZOMGZOMGZOMZGOMZG</div> </div> </body> </html> --v -=-=- 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.