?
Solved

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

Posted on 2011-09-07
6
Medium Priority
?
261 Views
Last Modified: 2012-05-12

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
0
Comment
Question by:Greg Alexander
  • 3
  • 2
6 Comments
 
LVL 16

Expert Comment

by:SSupreme
ID: 36500205
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
 
LVL 111

Expert Comment

by:Ray Paseur
ID: 36502208
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
 
LVL 19

Author Comment

by:Greg Alexander
ID: 36502708
Ray... do you have a sample handy :)
0
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
LVL 111

Accepted Solution

by:
Ray Paseur earned 2000 total points
ID: 36502932
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
 
LVL 19

Author Closing Comment

by:Greg Alexander
ID: 36503143
Perfect thanks!
0
 
LVL 111

Expert Comment

by:Ray Paseur
ID: 36503244
Thanks for the points and apologies to all CSS purists!  Best, ~Ray
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction This article is intended for those who are new to PHP error handling (https://www.experts-exchange.com/articles/11769/And-by-the-way-I-am-New-to-PHP.html).  It addresses one of the most common problems that plague beginning PHP develop…
The title says it all. Writing any type of PHP Application or API code that provides high throughput, while under a heavy load, seems to be an arcane art form (Black Magic). This article aims to provide some general guidelines for producing this typ…
The viewer will learn how to count occurrences of each item in an array.
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
Suggested Courses
Course of the Month14 days, 20 hours left to enroll

840 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question