Ver Mensaje Individual
  #1 (permalink)  
Antiguo 17/12/2009, 12:53
Avatar de Bravenap
Bravenap
 
Fecha de Ingreso: noviembre-2002
Ubicación: Los Arroyos, El Escorial, Madrid
Mensajes: 2.084
Antigüedad: 21 años, 5 meses
Puntos: 4
Diseño a 3 columnas dentro de otra columna

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 ??
__________________
¡¡NO A LA GUERRA!!
Si ponemos a nuestros mensajes títulos adecuados, la gente se animará más a abrirlos y resultarán más útiles en las busquedas. ¡No a los ayuuudaaa, urgenteee y similares!