¿Cómo hacer que un elemento de bloque en línea llene el rest de la línea?

¿Es posible tal cosa usando CSS y dos tags DIV de bloque en línea (o lo que sea) en lugar de usar una tabla?

La versión de la tabla es esta (se agregaron bordes para que pueda verla):

    

Produce una columna izquierda con un ANCHO FIJO (no un ancho porcentual) y una columna derecha que se expande para llenar EL ESPACIO RESTANTE en la línea. Suena bastante simple, ¿verdad? Además, dado que nada se “flota”, la altura del contenedor principal se expande adecuadamente para abarcar la altura del contenido.

–BEGIN RANT–
He visto las implementaciones de “corrección clara” y “Santo Grial” para diseños de columnas múltiples con columna lateral de ancho fijo, y son una mierda y son complicadas. Invierten el orden de los elementos, usan anchos de porcentaje o usan flotantes, márgenes negativos, y la relación entre los atributos “izquierda”, “derecha” y “margen” es compleja. Además, los diseños son sensibles al subpíxel, por lo que la adición de un solo píxel de bordes, relleno o márgenes romperá todo el diseño y enviará columnas completas a la siguiente línea. Por ejemplo, los errores de redondeo son un problema incluso si intenta hacer algo simple, como poner 4 elementos en una línea, con el ancho de cada uno configurado en 25%.
–END RANT–

He intentado usar “inline-block” y “white-space: nowrap;”, pero el problema es que simplemente no puedo obtener el segundo elemento para llenar el espacio restante en la línea. Establecer el ancho a algo así como “ancho: 100% – (LeftColumWidth) px” funcionará en algunos casos, pero realizar un cálculo en una propiedad de ancho realmente no es compatible.

Ver: 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 } 
 
left
right

Una solución moderna que usa flexbox:

 .container { display: flex; } .container > div { border: 1px solid black; height: 10px; } .left { width: 100px; } .right { width: 100%; background-color:#ddd; } 
 

Compatible con los navegadores modernos comunes (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; } 
  
left
right

Si no puede usar el overflow: hidden (porque no desea el overflow: hidden ) o si no le gustan los ataques / soluciones temporales de CSS, puede usar JavaScript en su lugar. Tenga en cuenta que puede no funcionar tan bien porque es 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 } 
 

Cuando cedes los bloques en línea

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

(desde CSS Float: flotando una imagen a la izquierda del texto )

Puede usar calc (100% – 100px) en el elemento fluido, junto con la pantalla: bloque en línea para ambos elementos.

Tenga en cuenta que no debe haber espacio entre las tags, de lo contrario tendrá que considerar ese espacio en su calc también.

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

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