Question

Is there any work around to do something like this work as expected?
I wish there were something like that width:remainder; or width:100% - 32px;.

width: auto; doesn’t works.

I think the only way possible is working around with paddings/margins, negative values, or float, or some html tags hack. I tried also display:block;.

I like to get the same result as this, without tables http://jsfiddle.net/LJGWY/

<div style="position: absolute; width: 100%; height: 100px; border: 3 solid red;" id="container">
    <div style="display:inline; width: (100%-100px); border: 3 solid green;">Fill</div>
    <div style="display:inline; width: 100px; border: 3 solid blue;">Fixed</div>
</div>

Answer 1

Updated answer:

The answers here are pretty old. Today, this can be achieved easily with flexbox:

.container {
  border: 4px solid red;
  display: flex;
}
.content {
  border: 4px solid green;
  flex-grow: 1;
  margin: 5px;
}
.sidebar {
  border: 4px solid blue;
  margin: 5px 5px 5px 0;
  width: 200px;
}

<div class="container">
  <div class="content">
    Lorem ipsum dolor sit amet.
  </div>
  <div class="sidebar">
    Lorem ipsum.
  </div>
</div>

Original answer:

Block level elements like <div> will fill 100% of the available width automatically. If you float one of them to the right, the contents of the other will fill the remaining space.

<div style="height: 100px; border: 3px solid red;" id="container">
  <div style="float: right; width: 100px; border: 3px solid blue;">Fixed</div>
  <div style="border: 3px solid green;">Fill</div>
</div>

http://jsfiddle.net/5AtsF/