CSS fluid columns (depending on content width)

Can anyone help me to find CSS solution (yep, no JS) to this problem:

+---------+----------------------+-------------------------------+
| Fixed   |   Variable           |  Flexible开发者_运维百科 width               |
|   width |      width content   | (adjusting to content width)  |
+---------+----------------------+-------------------------------+

<div>
  <div>Fixed width</div>
  <div>Variable width content</div>
  <div>Flexible width (adjusting to content width)</div>
</div>

NOTE: IE7 support is needed. All columns are transparent and CAN NOT overlap with each other.

• 1st column is fixed width;
• 2nd column is variable width (depending from image dimensions);
• 3rd column must take all remaining space.

---

How about this one.

parent -> position:relative;
parent:after -> clear:both
 fixed -> position:absolute
 variable -> float:left;padding-left:a-fixed-num
 flex -> display:block

---

@Rufus has the right idea, but it is missing out on one thing. Height. I'll recommend pretty much the same thing with some minor modifications:

.parent {
    position:relative;
}
.parent:after {
    clear: both;
}
.fixed {
    position: absolute;
    left: 0px;
    top: 0px;
    bottom: 0px; /* Conflicting absolute position trick */
    width: 150px; /* Or whatever the width you need is */
}
.variable {
    margin-left: 150px; /* Or, again, whatever you need */
    float: left;
    min-height: 100%; /* Don't use a border or padding or this will be messed up */
}
.flex {
    min-height: 100%; /* Same as variable, border or padding could mess this up */
}

All columns should be the same height, and you should be ready to go

---

Try this:

.group {
    display: table;width: 100%; table-layout: fixed;
}

.group > div {
    display: table-cell
}

jsFiddle example

That way, the right div is not 100% width, but the middle div does not expand with it's content...