Layout divs in rows then columns

Question

I have a container div and 3 div inside it as following.

<div>
    <div>1</div>
    <div>2</div>
    <div>3</div>
</div>

I don't know about content of each div inside, but they have variable height and width.

Height of container is decided by tallest div inside.

I want to show these div such a way that they fill height first (left to right) and then move to next column like below.

+------------------+
|+-------++-------+|
||       ||       ||
||       ||       ||
|+-------+|       ||
|+-------+|       ||
||       ||       ||
||       ||       ||
|+-------+|       ||
|         +-------+|
+------------------+

Obviously if these divs are all big and can't fit in one column, the layout will be 3 columns like below

+---------------------------+
|+-------++-------++-------+|
||       ||       ||       ||
||       ||       ||       ||
||       ||       ||       ||
||       ||       ||       ||
||       |+-------+|       ||
||       |         |       ||
|+-------+         |       ||
|                  +-------+|
+---------------------------+

Question: Is it possible to do this preferably using CSS only and how?

EDIT:

• There are few things that I need to clarify
• The container can have 2 or 3 columns at most (never 1 column and never more than 3).
• Width of the container is not fixed but with of all internal div are same.
• Height of container is decided by tallest internal div. for example if the tallest div is 300px height of container will be also be 300px.
• the other two shorter div should decide if they can fit in one column or should show in two separate columns. based on example (previous item).
• The other two smallest div should decide to be in one column or two columns.
• none of internal div should be wrapped.

Example: div Heights: 1st 300px, 2nd 100px, 3rd 150px
Result: This is a 2 column layout (2nd and 3rd in same column).

Example: div Heights: 1st 100px, 2nd 300px, 3rd 150px
Result: This is a 3 column layout.

Example: div Heights: 1st 100px, 2nd 200px, 3rd 300px
Result: This is a 2 column layout (1st and 2nd in same column).

Example: div Heights: 1st 100px, 2nd 210px, 3rd 300px
Result: This is a 3 column layout.

Answer 1

The key is to make first two divs display:inline-block and last one float:right. Like this:

.container{
    border: 1px solid grey;
    width: 200px; height: auto;
    margin: 20px; padding: 10px;
}
.container .one{
    border: 1px solid green;
    display: inline-block;
}
.container .two{
    border: 1px solid blue;
    display: inline-block;
}
.container .three{
    border: 1px solid red;
    float: right;
}
.clear{
    clear: both;
}

HTML:

<div class="container">
    <div class="three" style="width: 60px; height: 100px;"></div>
    <div class="one" style="width: 60px; height: 80px;"></div>
    <div class="two" style="width: 60px; height: 60px;"></div>
    <div class="clear"></div>
</div>
<div class="container">
    <div class="three" style="width: 70px; height: 100px;"></div>
    <div class="one" style="width: 70px; height: 80px;"></div>
    <div class="two" style="width: 60px; height: 60px;"></div>
</div>

Here is link to working result: http://jsfiddle.net/8xmrL/

Answer 2

An CSS only solution to columns could be to use column-count and a max-height on the container (the wrapping div).

• see this answer: CSS float under and left

• and a DEMO of a CSS-only approach

It kinda does what you want, at least to some extend. But it might break the divs at column breaks. So I think, you would probably be better of with something in javascript.

Update:

After your additional conditions, I would add only this to my answer, concerning the CSS-only approach: column-break-inside:avoid. It still ain't perfect - but a bit closer to what you want. You have to assign the width to columns, the divs can then be set to width:100%, the number of columns is automatic, alright, but I am not sure if you can dynamicaly adjust the container's width to the number of columns.

another note: to avoid splitting the divs in firefox, you need to use display:inline-block; in addition.

So, here you can see how it performs with your examples: DEMO

At least something to play with and maybe use another time ;-)