Css dynamic layout from top to bottom with instead of left to right


Default float left behavior goes left to right
 Default Behavior

But here is what I want, again, there is a static height... I realize and want it to keep expanding to the right if there were more:
 Desired Behavior
LVL 19
Greg AlexanderLead DeveloperAsked:
Who is Participating?
 
Ray PaseurConnect With a Mentor Commented:
http://www.laprbass.com/RAY_temp_3rows.php
Let me know if you have any questions.  The magic is in the nested loops (see line 38).  All the best, ~Ray
<?php // RAY_temp_3rows.php
error_reporting(E_ALL);


// SEE http://www.experts-exchange.com/Web_Development/Web_Languages-Standards/CSS/Q_27296422.html?cid=1572
// SEE http://www.experts-exchange.com/Web_Development/Web_Languages-Standards/CSS/Q_27296422.html?cid=1572#a36502708


// SET UP AN ARRAY OF STUFF TO PUT INTO TABLES
$things = array
( 'One'
, 'Two'
, 'Three'
, 'Four'
, 'Five'
, 'Six'
, 'Seven'
, 'Eight'
)
;

// SET THE NUMBER OF ROWS
$rows = 3;


// A PLACE TO PUT THE TABULAR DATA
$dat = array();

// MAKE A MATRIX FROM THE ARRAY OF STUFF
$col = 0;
while (!empty($things))
{
    $col++;
    $row = 0;
    while ($row < $rows)
    {
        $row++;
        $dat[$row][$col] = array_shift($things);
    }
}
// ACTIVATE THIS TO SEE THE MATRIX
// var_dump($dat);


// CONSTRUCT THE TABULAR INFORMATION FROM THE MATRIX
$htm = '<table>' . PHP_EOL;
foreach ($dat as $arr)
{
    // START A ROW
    $htm .= '<tr>';
    foreach ($arr as $str)
    {
        // ADD THE DATA TO THE ROW
        $htm .= '<td>' . $str . '</td>';
    }

    // CONCLUDE THE ROW
    $htm .= '</tr>' . PHP_EOL;
}
$htm .= '</table>' . PHP_EOL;

// SHOW THE WORK PRODUCT
echo $htm;

Open in new window

0
 
SSupremeCommented:
It is impossible to achieve with CSS.
But you have few options, you can make div columns and write JavaScript code to locate each box as you want or try to use
#greenbox {-moz-column-count:3; /* Firefox */
-webkit-column-count:3; /* Safari and Chrome */
column-count:3;}
it's CSS3 and not compatible with each browser as we would like, IE doesn't support it at all.
0
 
Ray PaseurCommented:
I think I would use tables (gasp?!) to organize tabular data. You can do a matrix transformation or something similar to get the data into three rows.  If you want a PHP code sample please let me know.  Best regards, ~Ray
0
Get expert help—faster!

Need expert help—fast? Use the Help Bell for personalized assistance getting answers to your important questions.

 
Greg AlexanderLead DeveloperAuthor Commented:
Ray... do you have a sample handy :)
0
 
Greg AlexanderLead DeveloperAuthor Commented:
Perfect thanks!
0
 
Ray PaseurCommented:
Thanks for the points and apologies to all CSS purists!  Best, ~Ray
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.