Position divs over each other within a container then float extra divs

Question

For example I have 3 divs within a container. the container has a fixed height. I want the inner divs which have dynamic height to be positioned over each other, then the remaining divs which do not fit in the container under the other divs to be floated as if there is a second column.

<div style="" class="Continer">
    <div class="d1">
        text text text <br />
        text text text <br />
        text text text <br />
        text text text <br />
        text text text <br />
    </div>
    <div class="d2">
        text text text <br />
        text text text <br />
        text text text <br />
        text text text <br />
        text text text <br />
        text text text <br />
    </div>
    <div class="d3">
        text text text <br />
        text text text <br />
        text text text <br />
        text text text <br />  
        text text text <br />
    </div>

Please check this fiddle

So in the fiddle above I want the third div to be floated dynamically as it does not fit under other divs within the container.

How can I achieve that

@dwreck08, it is not completely within the container. It is overflowing beyond the container's size. — EizEddin, Jul 08 '15 at 09:16

score 0 · Accepted Answer · answered Jul 07 '15 at 20:41

You could try using flexbox to do it.

UPDATED JSFIDDLE

.container{
    background:yellow;
    height: 250px;
    width: 100%;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: column wrap;
    flex-flow: column wrap;
    -webkit-align-content: flex-start;
    align-content: flex-start;
}
.d1{
    background: red;
    width: 100px;
}
.d2{
    background: blue; 
    width: 100px;
}
.d3{
    background: green;
    width: 100px;
}

<div class="container">
    <div class="d1">
        text text text <br />
        text text text <br />
        text text text <br />
        text text text <br />
        text text text <br />
    </div>
    <div class="d2">
        text text text <br />
        text text text <br />
        text text text <br />
        text text text <br />
        text text text <br />
        text text text <br />
    </div>
    <div class="d3">
        text text text <br />
        text text text <br />
        text text text <br />
        text text text <br />  
        text text text <br />
    </div>
</div>

Thanks Pangloss. However, it has compatibility issue with IE8, 9 and partially 10. Is there another way which is compatible with those versions? — EizEddin, Jul 08 '15 at 09:23
You can add -ms* prefix to make it to work on IE10, I don't know any CSS only solution for older browsers. Perhaps you could use Javascripts. — Stickers, Jul 08 '15 at 14:05

Position divs over each other within a container then float extra divs

1 Answers1