html - How to wrap text on a 100% width div? -

i have 3 div display property set table-cell. div 1 fixed width (22px). div 2 needs take rest of available space. div 3 needs pinned right side , take as text in it.

so issue having when contents of div 2 big pushes div 3 off screen.

this mobile web application. ideally happen text in div 2 clip if going push bold totals of screen. in javascript, don't think should have to.

here template code list item:

<div class="licontainer">     <div class="cell a"><img src="badge.png" width="20px"/></div>     <div class="cell b">{title}</div>    <div class="cell c"><b>{total}</b></div> </div> 

here css:

.cell{     display: table-cell;     vertical-align: middle; }  .a{     width: 22px;     padding-right: 15px; }  .b{     width: 100%; }  .c{     text-align: right; }  .licontainer{     width: 100%;     display: table-row; } 

edit: result of employing technique jithesh describes below

you can floats , works perfect.

• give float(left or right) elements has fixed width or width of contents.
• and overflow: hidden element should take remaining width.

important: cells have in order > c > b floating cells must preceed div takes remaining space.

here html:

<div class="licontainer">     <div class="a cell"><img src="https://www.google.co.in/images/srpr/logo4w.png" width="20px"/></div>     <div class="c cell"><b>197</b></div>     <div class="b cell">hey, long long long title</div> </div> 

and css

.cell{     padding: 20px 10px; }  .a{     width: 22px;     padding-right: 15px;     float: left;     background: #ccc; }  .b{     overflow: hidden;     background: #eee;     text-overflow: ellipsis;     white-space: nowrap; }  .c{     float: right;     background: #ccc; }  .licontainer{     width: 100%;     //display: table-row; } 

more improvements

add text-overflow: ellipsis , white-space: nowrap; block 'c' clip overflowing text '...' looks cool normal clipping.

see here: http://jsfiddle.net/y3jer/