Div with maximum possible size (column spanning available width)

I have a parent div of a fixed width, and 3 divs inside, in one line. I would like that the 2nd and 3rd divs have the widths that fit its' contents, and 1st div would occupy the rest of the parent's width. All divs are single lines of text (nowrap), first column can truncate text if it is too long (overflow:hidden).

I don't want to specify any widths explicitly, apart from the parent div.

<div id='main'>
    <div id='col1'>span me me me me me me me</div>
    <div id='col2'>abc</div>
    <div id='col2'>def</div>
 </div>

div {
    border: 1px solid开发者_StackOverflow中文版 black;
    float: left;
    white-space: nowrap;
    overflow: hidden;
}

div#main {
    width:200px;
}

div#col1 {
    /*width:150px;*/ /* I don't want this! */
}

div#col2 {
    float:right;
}

Fiddle here: http://jsfiddle.net/FMB2M/

See: http://jsfiddle.net/thirtydot/FMB2M/4/

• I switched using classes instead because you had #col2 twice. IDs should be unique.
• I had to move .col1 to after .col2 in the HTML. I hope you don't mind.
• This answer works in IE7+ and all modern browsers.
• I added text-overflow: ellipsis for neatness. Remove it if you don't like it.

CSS:

div {
    border: 1px solid black
}
.main {
    width: 200px;
    float: left
}
.col1 {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis
}
.col2 {
    float: right
}

HTML:

<div class='main'>
    <div class='col2'>abc</div>
    <div class='col2'>def</div>    
    <div class='col1'>span me me me me me me me</div>
</div>

You can use Flexible Box model to achieve what you need.

See: http://jsfiddle.net/FMB2M/13/

Note that this is not supported by old browsers (or current versions of Opera).

div {
  border: 1px solid black;
  white-space: nowrap;
  overflow: hidden
}

div#main {
  width:200px; 
  display:-webkit-box;
  display:-moz-box;
  display:box;

  -webkit-box-orient:horizontal;
  -moz-box-orient:horizontal;
  box-orient:horizontal;

  -webkit-box-align:start;
  -moz-box-align:start;
  box-align:start
}

div.col1 {
  -webkit-box-flex:1;
  -moz-box-flex:1;
  box-flex:1;
  text-overflow:ellipsis
}

I would suggest adding display:table-cell; to each of the col divs, then specify the widths of the ones you need. And possibly try #main as display:table-row;.. let me know if this works.. may need the float attributes removing if not.

put the second and third divs inside the first (col1) div

Also you cannot give 2 elements the same id though this may be a typo in your question and not your code