HELP CSS Flowing Columns/Forum (SoCoder)

Forum Home

Web Development

HELP CSS Flowing Columns

User

Message

Posted : Tuesday, 17 February 2009, 10:37 | Permalink | Mark Here

garand

WW Entries : 1

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

Posted : Tuesday, 17 February 2009, 10:47 | Permalink | Mark Here

Jayenkai

WW Entries : 103

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

-->

-----

Posted : Tuesday, 17 February 2009, 16:17 | Permalink | Mark Here

garand

WW Entries : 1

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.

Posted : Tuesday, 17 February 2009, 19:03 | Permalink | Mark Here

Jayenkai

WW Entries : 103

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|

-----

Posted : Friday, 20 February 2009, 08:46 | Permalink | Mark Here

garand

WW Entries : 1

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.

Posted : Friday, 20 February 2009, 08:48 | Permalink | Mark Here

Jayenkai

WW Entries : 103

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! -----

Posted : Sunday, 22 February 2009, 11:14 | Permalink | Mark Here

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>

-->

-----
YouTube Twitter
Computer Science Series: Logic (pt1) (part 2) (part 3) 2's Complement Mathematics: Basic Differential Calculus

Posted : Monday, 23 February 2009, 06:07 | Permalink | Mark Here

garand

WW Entries : 1

I had to get them to flow vertically... not horizontally.