Una solución común a este problema utiliza posicionamiento absoluto o flotadores recortados, pero estos son difíciles ya que requieren un ajuste exhaustivo si las columnas cambian en número + tamaño, y que debe asegurarse de que su columna "principal" sea siempre la más larga. En cambio, le sugiero que use una de las tres soluciones más robustas:
display: flex: con mucho, la solución más simple y mejor y muy flexible, pero no es compatible con IE9 y versiones anteriores.tableo display: table: muy simple, muy compatible (casi todos los navegadores), bastante flexible.display: inline-block; width:50% con un corte de margen negativo: bastante simple, pero los bordes inferiores de la columna son un poco complicados.
1) display:flex
Esto es realmente simple y es fácil adaptarse a diseños más complejos o más detallados, pero flexbox solo es compatible con IE10 o posterior (además de otros navegadores modernos).
Ejemplo: http://output.jsbin.com/hetunujuma/1
HTML relevante:
<div class="parent"><div>column 1</div><div>column 2</div></div>
CSS relevante:
.parent { display: -ms-flex; display: -webkit-flex; display: flex; }
.parent>div { flex:1; }
Flexbox tiene soporte para muchas más opciones, pero para tener simplemente cualquier número de columnas, ¡lo anterior es suficiente!
2. <table>odisplay: table
Una manera simple y extremadamente compatible de hacer esto es usar un table: te recomiendo que lo pruebes primero si necesitas soporte para IE antiguo . Estás lidiando con columnas; divs + flotantes simplemente no son la mejor manera de hacerlo (sin mencionar el hecho de que múltiples niveles de divs anidados solo para hackear las limitaciones de css es apenas más "semántico" que simplemente usar una tabla simple). Si no desea utilizar el tableelemento, considere cssdisplay: table (no compatible con IE7 y versiones anteriores).
Ejemplo: http://jsfiddle.net/emn13/7FFp3/
HTML relevante: (pero considere usar un plano en su<table>lugar)
<div class="parent"><div>column 1</div><div>column 2</div></div>
CSS relevante:
.parent { display: table; }
.parent > div {display: table-cell; width:50%; }
/*omit width:50% for auto-scaled column widths*/
Este enfoque es mucho más robusto que el uso overflow:hiddencon flotadores. Puede agregar prácticamente cualquier número de columnas; puede hacer que escalen automáticamente si lo desea; y conserva la compatibilidad con los navegadores antiguos. A diferencia de lo que requiere la solución flotante, tampoco es necesario saber de antemano qué columna es la más larga; la altura escala muy bien.
BESO: no uses hacks de flotación a menos que lo necesites específicamente. Si IE7 es un problema, aún elegiría una tabla simple con columnas semánticas sobre una solución de truco-CSS difícil de mantener y menos flexible cualquier día.
Por cierto, si necesita que su diseño sea receptivo (por ejemplo, sin columnas en teléfonos móviles pequeños), puede usar una @mediaconsulta para recurrir al diseño de bloque simple para anchos de pantalla pequeños; esto funciona si usa <table>o cualquier otro display: tableelemento.
3. display:inline blockcon un truco de margen negativo.
Otra alternativa es usar display:inline block.
Ejemplo: http://jsbin.com/ovuqes/2/edit
HTML relevante: (¡la ausencia de espacios entre lasdivetiquetas es significativa!)
<div class="parent"><div><div>column 1</div></div><div><div>column 2</div></div></div>
CSS relevante:
.parent {
position: relative; width: 100%; white-space: nowrap; overflow: hidden;
}
.parent>div {
display:inline-block; width:50%; white-space:normal; vertical-align:top;
}
.parent>div>div {
padding-bottom: 32768px; margin-bottom: -32768px;
}
Esto es un poco complicado, y el margen negativo significa que el fondo "verdadero" de las columnas está oscurecido. Esto a su vez significa que no puede colocar nada en relación con la parte inferior de esas columnas porque eso está cortado por overflow: hidden. Tenga en cuenta que, además de los bloques en línea, puede lograr un efecto similar con flotantes.
TL; DR : use flexbox si puede ignorar IE9 y versiones anteriores; de lo contrario, intente con una tabla (css). Si ninguna de esas opciones funciona para usted, hay hacks de margen negativo, pero estos pueden causar problemas de visualización extraños que son fáciles de omitir durante el desarrollo, y hay limitaciones de diseño que debe tener en cuenta.