Hay una serie de soluciones para este problema, incluyendo OneTrueLayout Técnica, Faux Columnas Técnica, CSS tabular Pantalla Técnica y hay también una técnica Capas.
Una solución para igualmente columnas altura-Ed es el CSS Tabular Display Technique que significa usar la pantalla : mesa de función. Funciona para Firefox 2+, Safari 3+, Opera 9+ y IE8.
El código para el CSS visualización tabular:
El HTML
<div id="container">
<div id="rowWraper" class="row">
<div id="col1" class="col">
Column 1<br />Lorem ipsum<br />ipsum lorem
</div>
<div id="col2" class="col">
Column 2<br />Eco cologna duo est!
</div>
<div id="col3" class="col">
Column 3
</div>
</div>
</div>
El CSS
<style>
#container{
display:table;
background-color:#CCC;
margin:0 auto;
}
.row{
display:table-row;
}
.col{
display: table-cell;
}
#col1{
background-color:#0CC;
width:200px;
}
#col2{
background-color:#9F9;
width:300px;
}
#col3{
background-color:#699;
width:200px;
}
</style>
Incluso si hay un problema con el auto expansión del ancho de la celda de tabla que puede se resuelve fácilmente insertando otro div dentro de la celda de tabla y dándole un ancho fijo. De todos modos, la sobreexpansión del ancho ocurre en el caso de usar palabras extremadamente largas (que dudo que alguien use, digamos, una palabra de 600px de longitud) o algunas div cuyo ancho es mayor que el ancho de la celda de la tabla.
Faux Column Technique es la solución más popular para este problema, pero tiene algunos inconvenientes, como, tiene que cambiar el tamaño de la imagen embaldosada de fondo si desea cambiar el tamaño de las columnas y tampoco es una solución elegante.
El consiste en crear un fondo acolchado de una altura extremadamente grande y recortarlo colocando la posición real del borde en la "posición lógica normal" aplicando un margen negativo inferior del mismo valor enorme y ocultando el medida creada por el relleno con desbordamiento: oculto aplicado al envoltorio de contenido. Un ejemplo simplificado sería:
El archivo HTML:
<html><head>
<style>
.wraper{
background-color:#CCC;
overflow:hidden;
}
.floatLeft{
float:left;
}
.block{
padding-bottom:30000px;
margin-bottom:-30000px;
width:100px;
background-color:#06F;
border:#000 1px solid;
}
</style>
</head>
<body>
<div class="wraper">
<div class="block floatLeft">first col</div>
<div class="block floatLeft">
Second col<br />Break Line
</div>
<div class="block floatLeft">Third col</div>
</div>
</body>
</html>
La Técnica Layering debe haber una solución muy ordenado que implica el posicionamiento absoluto de div de withing un pariente posicionado principal div envoltura. Básicamente consiste en una cantidad de divs secundarios y la div principal. El div principal tiene imperativamente posición: relativo a su colección de atributos css. Los hijos de este div son todos imperativamente posición: absoluta. Los niños deben tener superior y inferior conjunto de y izquierda-derecha dimensiones establecidas para dar cabida a las columnas con cada otra. Por ejemplo, si tenemos dos columnas, una de ancho 100px y la otra de 200px, teniendo en cuenta que queremos 100px en el lado izquierdo y 200px en el lado derecho, la columna de la izquierda debe tener {izquierda: 0; derecha: 200px} y la columna de la derecha {izquierda: 100px; derecha: 0;}
En mi opinión, la altura del 100% no implementada dentro de un contenedor de altura automatizado es un inconveniente importante y el W3C debería considerar la revisión de este atributo.
Otros recursos: link1, link2, link3, link4, link5 (important)
¿Has encontrado una solución para este problema? Estoy un poco atrapado en el mismo problema. –
Cuando establece un ancho de porcentaje, es un porcentaje del elemento principal, no de toda la pantalla. La única excepción a esto es el elemento '' en la parte superior. – starbeamrainbowlabs