Foros del Web » Creando para Internet » CSS »

Diseño a 3 columnas dentro de otra columna

Estas en el tema de Diseño a 3 columnas dentro de otra columna en el foro de CSS en Foros del Web. Muy buenas. A vueltas con el diseño a varias columnas de contenido líquido. La idea es la siguiente: ------- Cabecera ------ Menú -- Contenido -- ...
  #1 (permalink)  
Antiguo 17/12/2009, 12:53
Avatar de Bravenap  
Fecha de Ingreso: noviembre-2002
Ubicación: Los Arroyos, El Escorial, Madrid
Mensajes: 2.084
Antigüedad: 15 años, 1 mes
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!
  #2 (permalink)  
Antiguo 17/12/2009, 14:42
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: Diseño a 3 columnas dentro de otra columna

Hola:

Consulta la página de Mikmoro www.araudi.net, en concreto Diseño líquido 3 columnas.

Saludos.

  #3 (permalink)  
Antiguo 18/12/2009, 02:34
Avatar de Bravenap  
Fecha de Ingreso: noviembre-2002
Ubicación: Los Arroyos, El Escorial, Madrid
Mensajes: 2.084
Antigüedad: 15 años, 1 mes
Puntos: 4
Respuesta: Diseño a 3 columnas dentro de otra columna

Gracias jomaruro por responder.

Este ejemplo ya lo había visto pero no me han resultado las pruebas, no sé si porque he pasado algo por alto o simplemente porque las tres columnas (con líquida central) van en una columna previa.

Siguiendo el ejemplo, la estructura HTML debería ser algo así:
Código:
<div id="cabecera"></div>
<div id="contenedorMedio">
  <div id="contenido">
    <div id="contenedorInterno">
      <div id="colDerecha"></div>
      <div id="colIzquierda"></div>
      <div id="colCentro"></div>
    </div>
  </div>
</div>
<div id="menuNav"></div>
<div id="pie"></div>
Si:
Código:
#contenedorInterno {width: 100%;height: 100%;margin:0;}
¿El ancho de 100% será el de toda la página o de la capa contenido?

Gracias y un saludo.
__________________
¡¡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!
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 02:28.