auto adjusted 2 div depending on the content

I need to write CSS for adjusting 2 columns divs contained in a fixed size div

<div style="width:500px">
<div id="description" class="col1">
</div>
<div id="price" class="col2">
</div>
</div>

.col1
{
float: left;
clear: left;
}
.col2
{
text-align: right;
float: right;
max-width: 150px; 
}

I set the a max width for col2 and I want the following behavior.

• the col1 content is variable, and the col2 content also.
• if the content of col2 is less then 150px width, the col1 must take the remaining place.
• if the content of col2 is more then 开发者_Python百科150px width, the col2 will be limited to 150px width and the col1 to 350px.

The problem is that is the width of content of col1 is exceeding the available space, the col1 will take all the container width (500px). and the col2 will be shifted vertically after col1.

Your requirements confused me at first, but looking at it again now, it makes sense.

See: http://jsfiddle.net/thirtydot/SJg4M/

HTML:

<div class="colContainer">
    <div id="price" class="col2">price</div>
    <div id="description" class="col1">description</div>
</div>

As you can see, I had to swap the order of #price and #description. I hope that's acceptable.

CSS:

.colContainer {
    width: 500px;
    overflow: hidden;
    background: #ccc
}
.col1 {
    overflow: hidden;
    background: #f0f
}
.col2 {
    text-align: right;
    float: right;
    max-width: 150px; 
    background: #999
}

Just add in a max-width for .col1. If your container div is 500px, then

This is the best I could come up with, use javascript to set col1's width to the difference between the 500px container and the width of col2.

var width = 500 - $('#price').width();
$('#description').css('width', width+'px');

Example: http://jsfiddle.net/JZLBN/

i do not have redy solution, however my idea would be to play around with various display: XX properties, for example

  display: table-row

etc. I haven't tested it though, I am curious if this would do the trick :) it will not be supported in IE7, so if you need it there, just skip my suggestion. IT is not a real answer, will be happy to read comments about this idea.