Muy buenas. A vueltas con el diseño a varias columnas de contenido líquido.
La idea es la siguiente:
------- Cabecera ------
Menú -- Contenido --
----------- Pie ----------
Para eso uso este CSS:
Código:
#cabecera {background-position: left top; background-repeat: no-repeat; padding-left: 300px;
height: 85px;}
#contenedorMedio { float: left; width:100%; clear: both; display: block;}
#menuNav { float: left; margin-left: -100%; width: 190px; padding: 15px 3px 15px 2px;
background-repeat: no-repeat;}
#contenido { margin: 0 0 0 190px; padding: 10px 20px 0 20px; background-color: #FFFFFF;}
#pie { clear: both; text-align: center; margin: 10px auto 2px auto;}
Y su HTML:
Código:
<div id="cabecera"></div>
<div id="contenedorMedio">
<div id="contenido"></div>
</div>
<div id="menuNav"></div>
<div id="pie"></div>
Ahora quiero que la capa "contenido" se divida a su vez en 3 columnas, izquierda de 150 px, central ajustable con, por ejemplo, 150px mínimo, y derecha 150px. Pero después de miles combinaciones se me sigue desvariando:
El CSS:
Código:
#contenido #colDerecha { float: right; width: 150px; padding-left: 10px; border-left: solid 1px #CCCCCC;}
#contenido #colIzquierda { float: left; width: 150px; padding-right: 5px; border-right: solid 1px #CCCCCC;}
#contenido #colCentro { margin-left: 150px; margin-right: 250px; padding: 0 20px;}
Y su HTML:
Código:
<div id="contenido">
<div id="colDerecha"></div>
<div id="colIzquierda"></div>
<div id="colCentro"></div>
</div>
La derecha y la izquierda cada una a su ladito bien ajustadas pero la central se desplaza hacia abajo hasta donde acaban las otras dos.
¿¿¿?
al final le acabaré metiendo una tabla
??