Solved

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

Posted on 2011-09-07
6
234 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 109

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 18

Author Comment

by:Greg Alexander
ID: 36502708
Ray... do you have a sample handy :)
0
Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
LVL 109

Accepted Solution

by:
Ray Paseur earned 500 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 18

Author Closing Comment

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

Expert Comment

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

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Wordpress Security 29 48
PHP Curl to output a url 7 47
simple html dom php accessing table/cell  values 4 19
Make footer stick to bottom 6 17
Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
Since pre-biblical times, humans have sought ways to keep secrets, and share the secrets selectively.  This article explores the ways PHP can be used to hide and encrypt information.
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…

856 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