Question

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 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.

Answer 1

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
}