?
Solved

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

Posted on 2011-09-07
6
Medium Priority
?
250 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 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
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
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

WordPress Tutorial 2: Terminology

An important part of learning any new piece of software is understanding the terminology it uses. Thankfully WordPress uses fairly simple names for everything that make it easy to start using the software.

Question has a verified solution.

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

Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
Originally, this post was published on Monitis Blog, you can check it here . Websites are getting bigger and more complicated by the day. Video, images and custom fonts are all great for showcasing your product or service. But the price to pay in…
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…
Suggested Courses

800 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