如何在100％宽度的div上换行？

Question

I have a 3 div with their display property set to table-cell. Div 1 is fixed width (22px). Div 2 needs to take up the rest of the available space. Div 3 needs to be pinned to the right side and only take up as much as the text that is in it.

So the issue I am having is when the contents of Div 2 are too big it pushes Div 3 off the screen.

This is a mobile web application. Ideally what would happen is the text in Div 2 would clip if it was going to push the bold totals of the screen. I could do it in javascript, but don't think I should have to.

Here is the template code for the 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 is the 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: The result of employing the technique Jithesh describes below

Answer 1

You can do it with floats and it works perfect.

• Give float(left or right) to the elements that has fixed width or width of its contents.
• And overflow: hidden to the element that should take up the remaining width.

Important: The cells have to be in the order a > c > b as the floating cells must preceed the div that takes up the remaining space.

Here is the 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, This is the long long long title</div>
</div>

And the 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 and white-space: nowrap; to the block 'c' to clip the overflowing text with '...' that looks cool than normal clipping.

See it here: http://jsfiddle.net/Y3JEr/

Answer 2

What can be done is that if the b. is going to be too big, it will wrap the text to the second "row" (the height of whole section would double if needed). For this you have to set up something else than width: 100% for the .b container.

Why don't you just set width of an .a to 10%, .b to 80% and .c to 10%? If you won't define the height the content of a .b will just jump into second row.

---

Alternatively, if you need right div to be pinned to the right part of the screen, set absolute position for him like this

.c {
    position: absolute;
    right: 0px;
}

But be carefull, the .liContainer should have

position: relative;

otherwise, the absolute positioning for .c won't work.

This won't solve the whole problem probably, you will still need to make .b div less than 100% I guess.