I am looking to create a three column layout with specific width requirements. The first column should adjust based on content, the second column should fill the space between the first and third columns, and the third column should have a fixed width. Additionally, if the content in the second column is shorter than the available space, it should be right-aligned. I'm currently using a workaround for the flexible column width which I would like to improve upon. Here's a working example with the existing CSS code: http://jsfiddle.net/ew65G/638/
.col1 {
background-color: #ddf;
float: left;
height: 65px;
}
.col2 {
position: relative;
background-color: green;
float: none;
height: 65px;
overflow: hidden;
display: table-cell;
min-width: 100%;
}
.col2 span {
position: absolute;
top: 0;
left: 0;
max-width: 99%;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
vertical-align: middle;
}
/* col3 has a known width */
.col3 {
background-color: cyan;
float: right;
height: 65px;
}<div class="col1">Column1 has to be flexible</div>
<div class="col3">Column3</div>
<div class="col2">
<div>
This is where your second column content goes
</div>
<span>
This is an example of how you can style the ellipsis overflow effect for long sentences in the second column.
</span>
</div>Does anyone have suggestions for improving this layout without resorting to hacks? I am open to adjusting the HTML structure or using Sass, but need to ensure compatibility with IE10.