Como fazer um elemento de bloco embutido preencher o restante da linha?

Isso é possível usando CSS e duas tags DIV de bloco embutido (ou o que seja) em vez de usar uma tabela?

A versão da tabela é esta (bordas adicionadas para que você possa vê-lo):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head></head>
<body>
<table style="width:100%;">
<tr>
<td style="border:1px solid black;width:100px;height:10px;"></td>
<td style="border:1px solid black;height:10px;"></td>
</tr>
</table>
</body>
</html>

Produz uma coluna esquerda com uma LARGURA FIXA (não uma largura percentual) e uma coluna da direita que se expande para preencher O ESPAÇO RESTANTE na linha. Parece bem simples, certo? Além disso, como nada é "flutuado", a altura do contêiner pai expande-se adequadamente para abranger a altura do conteúdo.

--BEGIN RANT
- Vi as implementações "clear fix" e "holy grail" para layouts de várias colunas com coluna lateral de largura fixa, e elas são péssimas e complicadas. Eles invertem a ordem dos elementos, usam larguras de porcentagem ou flutuam, margens negativas e o relacionamento entre os atributos "esquerdo", "direito" e "margem" é complexo. Além disso, os layouts são sensíveis a subpixels, de forma que a adição de um único pixel de bordas, preenchimento ou margens interrompa todo o layout e envia colunas inteiras para a próxima linha. Por exemplo, erros de arredondamento são um problema, mesmo se você tentar fazer algo simples, como colocar 4 elementos em uma linha, com a largura de cada um configurada para 25%.
--END RANT--

Eu tentei usar "inline-block" e "white-space: nowrap;", mas o problema é que simplesmente não consigo obter o segundo elemento para preencher o espaço restante na linha. Definir a largura para algo como "width: 100% - (LeftColumWidth) px" funcionará em alguns casos, mas executar um cálculo em uma propriedade width não é realmente suportado.

Veja: http://jsfiddle.net/qx32C/36/

.lineContainer {
    overflow: hidden; /* clear the float */
    border: 1px solid #000
}
.lineContainer div {
    height: 20px
} 
.left {
    width: 100px;
    float: left;
    border-right: 1px solid #000
}
.right {
    overflow: hidden;
    background: #ccc
}

<div class="lineContainer">
    <div class="left">left</div>
    <div class="right">right</div>
</div>

Por que eu substituir margin-left: 100pxcom overflow: hiddenon .right?

EDIT: Aqui estão dois espelhos para o link acima (morto):

• archive.is
• web.archive.org
• https://colinaarts-com.herokuapp.com/#making-room-for-floats/articles/the-magic-of-overflow-hidden

Uma solução moderna usando o flexbox:

.container {
    display: flex;
}
.container > div {
    border: 1px solid black;
    height: 10px;
}

.left {
   width: 100px;
}

.right {
    width: 100%;
    background-color:#ddd;
}

<div class="container">
  <div class="left"></div>
  <div class="right"></div>
</div>

http://jsfiddle.net/m5Xz2/100/

Compatível com os navegadores modernos comuns (IE 8+): http://jsfiddle.net/m5Xz2/3/

.lineContainer {
    display:table;
    border-collapse:collapse;
    width:100%;
}
.lineContainer div {
    display:table-cell;
    border:1px solid black;
    height:10px;
}
.left {
    width:100px;
}

 <div class="lineContainer">
    <div class="left">left</div>
    <div class="right">right</div>
</div>

Você pode usar calc (100% - 100px) no elemento fluido, juntamente com display: bloco em linha para ambos os elementos.

Esteja ciente de que não deve haver espaço entre as tags; caso contrário, você terá que considerar esse espaço no seu cálculo também.

.left{
    display:inline-block;
    width:100px;
}
.right{
    display:inline-block;
    width:calc(100% - 100px);
}


<div class=“left”></div><div class=“right”></div>

Exemplo rápido: http://jsfiddle.net/dw689mt4/1/

Eu usei flex-growpropriedade para atingir esse objetivo. Você precisará definir display: flexpara o contêiner pai, depois precisará definir flex-grow: 1o bloco que deseja preencher o espaço restante, ou exatamente flex: 1como o tanius mencionado nos comentários.

Se você não puder usar overflow: hidden(porque não deseja overflow: hidden) ou se não gostar de hacks / soluções alternativas em CSS, poderá usar JavaScript. Observe que pode não funcionar tão bem porque é JavaScript.

var parent = document.getElementsByClassName("lineContainer")[0];
var left = document.getElementsByClassName("left")[0];
var right = document.getElementsByClassName("right")[0];
right.style.width = (parent.offsetWidth - left.offsetWidth) + "px";
window.onresize = function() {
  right.style.width = (parent.offsetWidth - left.offsetWidth) + "px";
}

.lineContainer {
  width: 100% border: 1px solid #000;
  font-size: 0px;
  /* You need to do this because inline block puts an invisible space between them and they won't fit on the same line */
}

.lineContainer div {
  height: 10px;
  display: inline-block;
}

.left {
  width: 100px;
  background: red
}

.right {
  background: blue
}

<div class="lineContainer">
  <div class="left"></div>
  <div class="right"></div>
</div>

http://jsfiddle.net/ys2eogxm/

Quando você desiste dos blocos embutidos

.post-container {
    border: 5px solid #333;
    overflow:auto;
}
.post-thumb {
    float: left;
    display:block;
    background:#ccc;
    width:200px;
    height:200px;
}
.post-content{
    display:block;
    overflow:hidden;
}

http://jsfiddle.net/RXrvZ/3731/

(por CSS Float: flutuando uma imagem à esquerda do texto )