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

for example have 3 divs within container. container has fixed height. want inner divs have dynamic height positioned on each other, remaining divs not fit in container under other divs floated if there 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 fiddle

so in fiddle above want third div floated dynamically not fit under other divs within container.

how can achieve that

you try using flexbox 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>