DIV Vertically floating DIV arrange from up to down by rows

Question

I am trying to locate DIVs vertically from up to down inside container. Container should be limited vertically by 500px. All DIVs that couldn't fit in this limit should be floated to next row.

<style>
#container {
    position:relative;
    background-color:red;
    max-width:500px;
    min-height:500px;
    }
#area {
    position:absolute;
    bottom: 0;
    background-color:yellow;
    margin:20px;
    width:100px;
    height:100px;

}
</style>

<div id="container">
    <div id="area1">area1</div>
    <div id="area2">area2</div>
    <div id="area3">area3</div>
    <div id="area4">area4</div>
    <div id="area5">area5</div>
    <div id="area6">area6</div>
</div>

My planing result should be like this:

    ---------------------------->
    | -------- --------
    | |Area 1| |Area 5|
    | -------- --------
    | -------- --------
max | |Area 2| |Area 6|
500 | -------- --------
 px | --------
    | |Area 3|   etc..
    | --------
    | --------             /\
    | |Area 4|   etc....... |
    | --------   
    --------------------------->

My questions is: What do I do wrong and if it is possible to implement? Thank you!

Answer 1

CSS columns seem like a promising solution at first, but they won't automatically adjust the width of the container as areas are added or removed.

My suggestion is to lay out the divs as if you were stacking them horizontally rather than vertically, going from right to left. That is easy enough to achieve with float:right . Once you have that, you can rotate the whole container 90 degrees to get the equivalent vertical layout. But since the area divs will now all be incorrectly oriented, you'll also need to rotate those 90 degrees back in the opposite direction.

Something like this:

#container {
  position:relative;
  background-color:red;
  max-width:500px;
  margin-left:-500px;
  max-height:500px;
  overflow:hidden;
  -webkit-transform:rotate(-90deg);
  -webkit-transform-origin:top right;
  -ms-transform:rotate(-90deg);
  -ms-transform-origin:top right;
  transform:rotate(-90deg);
  transform-origin:top right;
  padding:20px 0 0 20px;
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  box-sizing:border-box;
}
#area {
  background-color:yellow;
  margin:0 20px 20px 0;
  width:100px;
  height:100px;
  float:right;
  -webkit-transform:rotate(90deg);
  -ms-transform:rotate(90deg);
  transform:rotate(90deg);
}

Fiddle example

Note the negative margin-left on the container, which adjusts the position after rotation - that needs to match the container "height" (ie the max-width property). The max-height property represents the maximum "width" that the container will reach before being clipped. The overflow:hidden is needed to force the container to grow to contain its floating child elements.

Also, note that because the area divs are now floated, the margins between them won't collapse. One way of solving that is to restrict the margins to only two sides (I've used right and bottom) and then emulate the margins for the other sides via padding on the container with box-sizing:border-box .

Finally, in this particular example the area divs have a 1:1 aspect ratio, which means we don't have to worry about repositioning them after the rotation. Things become slightly more complicated if their width and height are different.

This solution won't work on older versions of IE, but it at least supports IE9.

Answer 2

You can do this using CSS columns, like in this jsfiddle demo , using following CSS

     #container{
        position: relative;
        background-color: red;
        max-width: 500px;
        min-height: 500px;
        padding: 20px;

        -moz-box-sizing: border-box;
        box-sizing: border-box;

        -moz-column-width: 150px;
        -webkit-column-width: 150px;
        -o-column-width: 150px;
        column-width: 150px;
     }
     #area{
        background-color: yellow;
        display: inline-block;
        font: italic 45px/215px georgia;
        height: 215px;
        margin-bottom: 21px;
        text-align: center;
        width: 215px;
     }

Sizes in the demo have been scaled down to accommodate for small rendering frame size.

This certainly, not very surprisingly, will not work in IE version older than version 10. You can probably use techniques from following ALA page to get it working in IE.

Answer 3

 #container { background-color: red; max-width: 330px; max-height: 300px; padding: 20px; overflow:auto; } .area { background-color: yellow; display: inline-block; height: 70px; margin-bottom: 21px; text-align: center; width: 70px; } .x { background-color: cyan; height: 30px; width: 90px; } .Z { background-color: grey; height: 300px; width: 190px; }

 <div id="container"> <div class="area">area1</div> <div class="area">area2</div> <div class="area x">area3</div> <div class="area">area4</div> <div class="area x">area5</div> <div class="area Z">area6</div> </div>