Solved

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

Posted on 2011-09-07
6
245 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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 110

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
Instantly Create Instructional Tutorials

Contextual Guidance at the moment of need helps your employees adopt to new software or processes instantly. Boost knowledge retention and employee engagement step-by-step with one easy solution.

 
LVL 110

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 19

Author Closing Comment

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

Expert Comment

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

Featured Post

Secure Your WordPress Site: 5 Essential Approaches

WordPress is the web's most popular CMS, but its dominance also makes it a target for attackers. Our eBook will show you how to:

Prevent costly exploits of core and plugin vulnerabilities
Repel automated attacks
Lock down your dashboard, secure your code, and protect your users

Question has a verified solution.

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

Build an array called $myWeek which will hold the array elements Today, Yesterday and then builds up the rest of the week by the name of the day going back 1 week.   (CODE) (CODE) Then you just need to pass your date to the function. If i…
Find out what you should include to make the best professional email signature for your organization.
The viewer will learn how to dynamically set the form action using jQuery.
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…

696 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