tabla - Cómo hacer un diseño estable de dos columnas en HTML/CSS

tabla html5 responsive ejemplos

Question

Quiero un contenedor con dos columnas. Detalles:

El contenedor

• El ancho debe ajustarse al 100% de su elemento padre (se logra fácilmente).
• La altura debe ajustarse para contener ambas columnas (es decir, su altura debe ser exactamente igual a la altura más grande de las dos columnas, de modo que no haya desbordamiento y las barras de desplazamiento nunca se muestren)
• Debe tener un tamaño mínimo igual al doble del ancho de la columna izquierda.

Las columnas en general.

• Debe ser de altura variable, ajustándose a la altura de su contenido.
• Deben estar lado a lado, de manera que sus bordes superiores estén alineados.
• No debe romper el diseño o envolverse uno debajo del otro si se aplica un solo píxel de borde, relleno o margen a cualquiera de los dos, ya que sería extremadamente inestable y desafortunado.

La columna izquierda específicamente

• Debe tener un ancho fijo, absoluto en unidades de píxeles.

La columna derecha específicamente

• El ancho debe llenar el espacio restante en el contenedor. En otras palabras...
• El ancho debe ser igual al ancho del contenedor menos el ancho de la columna izquierda, de modo que si coloco un elemento de bloque DIV dentro de esta columna, establezco su ancho al 100%, le doy una altura de 10px, y le doy un color de fondo. Veré una tira de color de 10 píxeles de alto que va desde el borde derecho de la columna izquierda hasta el borde derecho del contenedor (es decir, llena el ancho de la columna derecha).

Estabilidad requerida

El contenedor debe poder redimensionar (redimensionando la ventana del navegador) hasta su ancho mínimo (especificado anteriormente) o un ancho mucho mayor sin romper el diseño. La "ruptura" incluiría el tamaño de la columna izquierda cambiando (recuerde que se supone que tiene un ancho de píxel fijo), la columna derecha se ajusta debajo de la izquierda, aparecen barras de desplazamiento, los elementos de bloque en la columna derecha no pueden cubrir el ancho de la columna completa , y en general cualquiera de las especificaciones mencionadas anteriormente no se mantiene como verdadera.

Fondo

Si se utilizan elementos flotantes, no debería haber ninguna posibilidad de que la columna de la derecha se ajuste por debajo de la izquierda, de que el contenedor no contenga ambas columnas (al recortar cualquier parte de la columna o permitir que cualquier parte de las columnas desborde su límite) ), o que aparecerán las barras de desplazamiento (por lo que estaría cansado de sugerir el uso de otra cosa que no sea el desbordamiento: oculto para desencadenar la contención de elementos flotantes). La aplicación de bordes a las columnas no debe romper el diseño. El contenido de las columnas, especialmente de la columna derecha, no debe romper el diseño.

Parece que hay una solución simple basada en tablas para esto, pero en todas las circunstancias falla de manera miserable. Por ejemplo, en Safari, mi columna izquierda de ancho fijo se reducirá si el contenedor es demasiado pequeño, en lugar de mantener el ancho que especifiqué. También parece ser que el ancho CSS, cuando se aplica a un elemento TD, se refiere a un ancho mínimo, de manera que si se coloca algo más grande dentro de él, se expandirá. He intentado usar el diseño de tabla: corregido; no ayuda También he visto el caso donde el elemento TD que representa la columna de la derecha no se expandirá para llenar el área restante, o aparecerá (por ejemplo, una tercera columna de 1px de ancho se empujará completamente hacia el lado derecho), pero colocar un borde alrededor de la columna derecha mostrará que es tan ancho como su contenido en línea, y los elementos a nivel de bloque con su ancho establecido en 100% no llenan el ancho de la columna, sino que coinciden con el ancho del contenido en línea (Es decir, el ancho del TD parece depender completamente del contenido).

Una solución potencial que he visto es demasiado compleja; No me importa el IE6, siempre y cuando funcione en IE8, Firefox 4 y Safari 5.

Answer 1

No me importa el IE6, siempre que funcione en IE8, Firefox 4 y Safari 5.

Esto me hace feliz.

Prueba esto: Demo en vivo

display: table es sorprendentemente buena. Una vez que no te importa IE7, puedes usarlo. Realmente no tiene ninguna de las desventajas habituales de <table> .

CSS:

#container {
background: #ccc;
display: table
}
#left, #right {
display: table-cell
}
#left {
width: 150px;
background: #f0f;
border: 5px dotted blue;
}
#right {
background: #aaa;
border: 3px solid #000
}

Answer 2

Aqui tienes:

<html>
<head>
<title>Cols</title>
<style>
#left {
width: 200px;
float: left;
}
#right {
margin-left: 200px;
/* Change this to whatever the width of your left column is*/
}
.clear {
clear: both;
}
</style>
</head>
<body>
<div id="container">
<div id="left">
Hello
</div>
<div id="right">
<div style="background-color: red; height: 10px;">Hello</div>
</div>
<div class="clear"></div>
</div>
</body>
</html>

Véalo en acción aquí: http://jsfiddle.net/FVLMX/

Answer 3

Pedazo de pastel.

Use 960Grids Vaya al generador de diseño automático y haga un diseño fluido de dos columnas. Construye una columna de la izquierda al ancho de las cuadrículas que funcione ... este es el único desafío al usar cuadrículas y es muy fácil una vez que lees un tutorial. En pocas palabras, cada columna en una cuadrícula tiene un cierto ancho, y establece la cantidad de columnas que desea usar. Para obtener una columna que tenga exactamente un ancho determinado, debe ajustar sus cálculos para que el ancho de su columna sea exacto. No es demasiado duro.

No hay posibilidad de envolverlo porque otros ya han peleado esa batalla por ti. Compatibilidad de vuelta tan lejos como sea posible que tenga que ir. Rápido y fácil .... Ahora, descargue, personalice y despliegue.

Voila Rejillas FTW.