CSS three column layout with unknown first and flexible second cols

Question

I need a three column layout where the first col width is unknown and only takes up as much space as is needed. The second col should fill the space between first and third and the content should have ellipses as overflow. If the content of the second col is less than the space between first and third it should be right aligned. The third col width is know/fixed.

I have a working example here, but it uses a nasty hack to get the flexible column to have any width. 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>
    &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 
  </div> 
  <span>
    This is an example of a div that contains a series of very long run on sentences. This is an example of a div that contains a series of very long run on sentences. This is an example of a div that contains a series of very long run on sentences. This is an example of a div that contains a series of very long run on sentences. This is an example of a div that contains a series of very long run on sentences. This is an example of a div that contains a series of very long run on sentences. This is an example of a div that contains a series of very long run on sentences. This is an example of a div that contains a series of very long run on sentences.
  </span>
</div>

Can anyone suggest a better way?

I'm using sass and the html structure is flexible if need be. I also need to support IE10 :/

Answer 1

You should learn "css flexbox" model. here is fiddle

.root {  display:flex;}
.col1 { } /*takes up as much space as is needed*/
.col2 { flex:1;} /*take all remaining space */
.col3 { width:65px;} /*fixed width, no resize */