Two dynamic CSS columns? -

so, have 3 divs:

<div class="takeremaining">   <div class="centeredcontent">     centered content   </div> </div> <div class="dynamicallyallocated">   dynamic content </div> 

i'd rightmost div dynamicallyallocated dynamically sized based on content using display: inline-block; , other div takeremaining take remaining space in parent div. i've tried css:

.takeremaining {   display: inline-block;   width: 100%;   float: left;   background-color: #0000ff; }  .centeredcontent {   display: table;   margin: 0 auto;   background-color: #00ffff; }  .dynamicallyallocated {   display: inline-block;   float: right;   background-color: #00ff00 } 

but, can see this jsfiddle demo, div dynamicallyallocated bumped beneath takeremaining. believe because of width: 100%; in takeremaining, i'm not sure how give dynamic width based on conditional width of dynamicallyallocated. suggest?

here solution you.

.container {    display: table;    width: 100%;  }    .takeremaining {    display: table-cell;    width: 100%;    text-align: center;    background-color: #0000ff;  }    .centeredcontent {    display: inline-block;    background-color: #00ffff;  }    .dynamicallyallocated {    display: table-cell;    width: 0;    background-color: #00ff00;    white-space: nowrap  }

<div class="container">    <div class="takeremaining">      <div class="centeredcontent">        centered content      </div>    </div>    <div class="dynamicallyallocated">      dynamic content    </div>  </div>