HTML CSS: arreglar y estirar el ancho diseño de dos columnas

<div style="width: 800px; height: 600px"> 

    <div style="float:left; width: 100px"> 
     left fixed-width column 
    </div> 
    <div style="???"> 
     right stretching column (the width should be 700px in this case.) 
    </div> 

</div>

¿Cuál es la forma estándar de crear un diseño de dos columnas donde el izquierdo es de tamaño fijo y el derecho se extiende?HTML CSS: arreglar y estirar el ancho diseño de dos columnas

Me gustaría que los estilos de ambas columnas sean independientes. Encontré un par de soluciones aquí, pero si cambio el ancho de la columna de la izquierda, el estilo de la columna de la derecha (por ejemplo, el margen) debe cambiarse junto con él.
No necesito admitir navegadores antiguos. Si es estándar, está bien.

Fuente

2012-05-13 user1392013

Aplicar overflow: hidden a la segunda div. Esto introducirá un nuevo block formatting context. Puede encontrar más información en Can overflow:hidden affect layout?.

jsFiddle Demo

Fuente

2012-05-13 10:06:52 kapa

solución simple y elegante! – user1392013

@ user1392013 Si está satisfecho, puede aceptar mi respuesta con la marca de verificación a la izquierda de mi respuesta. – kapa

** Debe tener mucho cuidado con la configuración del desbordamiento: oculto ** ... ¡recuerde que esto ocultará el contenido si se extiende más allá del área asignada! Incluso si tiene una cantidad fija de contenido, los usuarios tienen control sobre cierta pantalla del navegador que puede afectar su diseño, como el tamaño de la fuente. Si el usuario ha aumentado su tamaño de fuente para una lectura más cómoda, puede hacer que el contenido de su div correcto sea más grande que el espacio asignado y el "desbordamiento: oculto" significará que no será visible para ese usuario. ¿Vale la pena alienar a los clientes por el bien de un valor extra de CSS para cambiar? – FluffyKitten

También puede utilizar un div para envolver las dos columnas (y centrarlos como un bloque, si se quiere) - a continuación, establecer el ancho de la primera columna, y utilizar la posición absoluta en la segunda columna de hacer su borde izquierdo el borde de la primera columna y su borde derecho el borde de la envoltura.

<div style="width:auto; min-width:500px; margin:30px; position:relative; top:0px;"> 

<div style="width:100px; height:100px; padding:15px; background-color:aqua;"> 
</div> 

<div style="height:100px; padding:15px; position:absolute; top:0px; left:100px; right:0px; background-color:blue;"> 
</div> 

</div>

JSFiddle

Fuente

2014-04-08 21:04:33 Ryan

HTML CSS: arreglar y estirar el ancho diseño de dos columnas

Respuesta

Cuestiones relacionadas