Three divs: two on the left, one on the right. Second one has ellipsis. Screenshot, jsfiddle attached

Question

Here's the mockup of what I want to achieve(3 cases of the same mockup):

So, first div(green) has fixed width. Third div(blue) is always at the right side and it gets as much space as it needs, considering text in it. Second div(orange) takes all remaining space and if text in this orange div doesn't fit, it gets ellipsis style at the end.

Please help me to achieve this(IE8-IE10, Chrome support), I've tried to put first elements into container, tried using float, inline-block, but there are still problems.

Thank you, here's jsfiddle, so you can quickly work with it: http://jsfiddle.net/0tLvyf20/4/

<div class="container">
    <div class="checkbox"></div>
    <div class="name">Some text</div>
    <div class="value">12345</div>
</div>

Answer 1

With Flexbox

* {
    box-sizing: border-box;
}
.container {
    display: flex;
    width: 300px;
    height: 30px;
    background-color: #B7B7B7;
    padding: 2.5px; /* This is the remaining gap from the edges */
}

.container div {
    margin: 5px; /* This is for the gap between elements. */
}

.checkbox {
    width: 15px;
    background-color: green;
}

.name {
    flex: 1;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    background-color: orange;
}

.value {
    background-color: LightCyan;
}

With a table (Things get a bit tricky)

HTML

<table class="container">
    <tr>
        <td class="checkbox"></td>
        <td class="name">
            <!-- Necessary Evil -->
            <table>
                <tr>
                    <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit eaque autem quos nulla dignissimos corporis pariatur itaque excepturi debitis ratione dolorem iste consectetur accusantium necessitatibus blanditiis labore unde perferendis tempore.</td>
                </tr>
            </table>
        </td>
        <td class="value">12345</td>
    </tr>
</table>

CSS

.container {
    width: 300px;
    height: 30px;
    background-color: #B7B7B7;
    /table-layout: fixed;
    border-spacing: 5px;
}
.checkbox {
    width: 20px;
    background-color: green;
}
.name td {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    background-color: orange;
}
.name table {
    table-layout: fixed;
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    border: 0;
}
.value {
    background-color: LightCyan;
}

Answer 2

Demo

css only solution using flex-box

css

.container {
    width: 300px;
    height: 30px;
    background-color: #B7B7B7;
    display: flex;
    flex-wrap: wrap;
    align-items: center
}

.checkbox {
    width: 15px;
    height: 15px;
    margin: 5px;
    background-color: green;
}

.name {
    height: 20px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    background-color: orange;
    flex: 1;
}

.value {
    height: 20px;
    background-color: LightCyan;
    margin-right: 5px;
}

Answer 3

And one without tables/flexbox.

Slightly different HTML structure, largely same css.

<div class="container">
    <div class="checkbox"></div>
    <div class="value">12345</div>
    <div class='expander'>
       <div class="name">Some text</div>
    </div>
</div>
<div class="container">
    <div class="checkbox"></div>
    <div class="value">123456789</div>
    <div class='expander'>
       <div class="name">Some long text that won't overlap</div>
    </div>
</div>
<div class="container">
    <div class="checkbox"></div>
    <div class="value">12354354354345</div>
    <div class='expander'>
       <div class="name">Some very long text that should elipse text</div>
    </div>
</div>

with the following CSS

.container {
    display: block;
    width: 300px;
    height: 30px;
    background-color: #B7B7B7;
    overflow: hidden;
}

.checkbox {
    display: inline-block;
    margin-top: 5px;
    width: 15px;
    height: 15px;
    background-color: green;
    float: left;
}

.expander {
    background-color: orange;
    overflow: hidden;
    display: block;
}

.name {
    display: inline-block;
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 100%;
    overflow: hidden;
}

.value {
    display: inline-block;
    background-color: LightCyan;
    float: right;
}

and a fiddle to see it (tested this only in chrome, IE 11)

Answer 4

With a diffrent structure;

<div class="container">
    <div class="checkbox"></div>
    <div class="namevalue">
       Some Text
        <div class="value">1234</div>

    </div>

</div>

*{
    box-sizing:border-box;
}
.container {
    width: 300px;
    height: 30px;
    background-color: #B7B7B7;
}

.checkbox {
    display: inline-block;
    position: relative;
    width: 15px;
    height: 15px;
    margin: 5px 3px 5px 5px;
    top: 3px;
    background-color: green;
    float:left;
}
.namevalue {
    display: inline-block;
    position: relative;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    background-color: orange;
    width:275px;
top: 7px;
     float:left;

}
.name {
    display: inline-block;
    position: relative;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    background-color: orange;
}
.value {
    display: inline-block;
    position: relative;
    background-color: LightCyan;
    float:right;
    border-left:5px solid #B7B7B7;
}