My challenge is to arrange 4 divs side by side, with the first two on the left, the fourth on the right, and the third filling the remaining space in between. The third div should have a dynamic width and contain two text lines that should support ellipsis if the page size limits visibility. Currently, when the text width exceeds the available space, the fourth div moves down. Is there a way to achieve this layout without using Javascript, while ensuring compatibility with IE9?
Here's my current setup: http://jsfiddle.net/NMrks/aySyu/1/
HTML
<div class="container">
<div class="blockA">A</div>
<div class="blockB">B</div>
<div class="blockC">
<div class="blockC_container">
<span class="lineA">Text text text from line A</span>
<span class="lineB">Text text text text text from line B</span>
</div>
</div>
<div class="blockD">
<span>D</span>
</div>
<div style="clear:both"></div>
</div>
CSS
.container {
height: 60px;
padding-top: 5px;
padding-bottom: 5px;
min-width: 340px;
}
.container .blockA {
width: 54px;
height: 100%;
float: left;
display: block;
background-color: #ff00ff;
}
.container .blockB {
width: 50px;
height: 100%;
float: left;
display: block;
background: #df8505;
}
.container .blockC {
height: 100%;
float: left;
display: block;
background: #ff7d7b;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.container .blockC .lineA {
line-height: 2.0em;
display: block;
font-weight: bold;
}
.container .blockC .lineB {
line-height: 1.0em;
display: block;
}
.container .blockD {
width: 64px;
height: 100%;
float: right;
display: block;
background: #df8505;
}
I've experimented with various properties like flexbox, adjusting widths and margins, but haven't found a solution yet. Any help would be greatly appreciated.
Thank you