Así que tengo un diseño como este:
div { border: 1px solid } <div id="col_1" style="float:left;width:150px;">1</div> <div id="col_2" style="float:left;width:100px;">2</div> <div id="col_3" style="float:left;width:<REMAINING_WIDTH>;">3</div>col_1 y col_2 ocupan una cantidad fija de espacio. Quiero que la tercera columna ocupe el resto. ¿Cuál es la mejor manera de lograr esto?
Podría hacer algo loco, abandonar el javascript y las cosas CSS3 que no están listas para el horario de máxima audiencia y usar el posicionamiento absoluto.
Ver este jsfiddle . Puntos de bonificación por comportarse bien a través de los cambios de tamaño del navegador, también.
#col_1 { position: absolute; top: 0px; bottom: 0px; width: 100px; background-color: #eee; } #col_2 { position: absolute; top: 0px; bottom: 0px; width: 150px; left: 100px; background-color: #ccd; } #col_3 { position: absolute; top: 0px; bottom: 0px; left: 250px; right: 0px; background-color: #cdc; } <div id='col_1'>Column 1</div> <div id='col_2'>Column 2</div> <div id='col_3'> Column 3 </div>Se necesita Javascript para esto. Si desea que los 3 divs llenen el espacio de la ventana (100%), entonces necesita usar javascript para detectar cuánto espacio queda y asignar la altura de col_3 en consecuencia. Con jQuery puedes hacer
var one = $('#col_1').height(), two = $('#col_2').height(), remaining_height = parseInt($(window).height() - one - two); $('#col_3').height(remaining_height);Ya ha aceptado una respuesta, pero puede consultar CSS Flexbox, que está diseñado para resolver este problema exacto sin depender de los trucos "float:left". Funciona en Chrome, Safari y FF (con los prefijos -webkit y -moz). No en IE todavía.
Aquí hay algunos enlaces rápidos:
http://hacks.mozilla.org/2010/04/the-css-3-flexible-box-model/
http://www.terrainformatica.com/w3/flex-layout/flex-layout.htm