CODEWITHSUNDEEP
jqueryhtmlcss
Brooklyn Nicholson
Brooklyn Nicholson

Reputation: 646

Auto column divs with a max-height parent

So I need to align columns, with divs that have a set width inside a parent that has a max-height of the screensize.

So, for example:

[div]
[div]
[div]
[div]

Would be the max height, but if we go an extra div it needs to do this:

[div][new_div]
[div]
[div]
[div]

and so on. So once it hits the max height (of the screensize, or whatever) the divs needs to auto column over and align to the top right.

In summary:

A maximum of 2 columns, filled with data that stacks upon eachother [one after the other, veritcally]. Once it hits the max width [which is the screensize] I need it to automatically create a new column to hold the new rows.

Upvotes: 0

Views: 1021

Answers (2)

Magnus Haug
Magnus Haug

Reputation: 93

Here is a working demo using right float: right, and then transform: rotate to emulate up/down-floating. With some work you could make this work in all major browsers, you'd just have to apply different rotation filters for the different platforms.

The resulting code can be a bit confusing to work with, as the width becomes the height and visa versa, but it might still be a better solution than moving the div around with javascript.

    <html>
    <head>
     <style type="text/css">
      #outer {
       width: 500px;
       margin: 300px 0 0 -200px;
       -webkit-transform: rotate(-90deg);
      }
      .inner {
       background-color: red;
       width: 100px;
       height: 100px;
       float: right;
       margin: 10px;
       -webkit-transform: rotate(90deg);
      }
     </style>
    </head>

    <body>
     <div id="outer">
      <div class="inner">1</div>
      <div class="inner">2</div>
      <div class="inner">3</div>
      <div class="inner">4</div>
      <div class="inner">5</div>
      <div class="inner">6</div>
      <div class="inner">7</div>
     </div>
    </body>
    </html>

Upvotes: 0

daGUY
daGUY

Reputation: 28763

Hm...that's tricky. You might be able to use CSS3 columns to pull this off, though they aren't supported in IE as far as I know.

Since you said your <div>s have a set width, you could make that width the width of the column. Then when the stack of <div>s fill up the allotted vertical space, they should overflow into a new column.

Upvotes: 1

Related Questions