Hola: De todas maneras, creo que colocar dos divs (uno dentro de otro, o mejor dicho todos dentro de uno más grande) me parece algo redundante, para eso se puede usar el body (y aplicarle padding o margin a gusto, como explicaban en ALA hace como 3 meses). Aparte que IE anda super mal con un div dentro de otro.
saludos On 5/17/06, Reynier Perez Mira <[EMAIL PROTECTED]> wrote: > Hola: > Perfecto, eso era, ahora imagino que el container se vaya expandiendo a > medida que lo haga el contenido interior o no? > Salu2 > -- > ReynierPM | Kubuntu 5.10 | Linux User:#310201 > Hay dos cosas infinitas: el Universo y la estupidez humana. Y del Universo no > estoy seguro. > > > -----Mensaje original----- > > De: [EMAIL PROTECTED] > > [mailto:[EMAIL PROTECTED] En nombre de neojp > > Enviado el: Wednesday, May 17, 2006 12:08 AM > > Para: Ovillo, la lista de CSS en castellano > > Asunto: Re: [Ovillo] Problemas con maquetado CSS > > > > Quitale el height:100% al container y prueba. Sino intenta > > poniendole un width exacto al #content, o quizas crea un div > > con clear:both; delante y debajo del footer para probar. > > > > > > On 5/16/06, Reynier Perez Mira <[EMAIL PROTECTED]> wrote: > > > > > > Hola lista: > > > Estoy tratando de maquetar una web que contiene las siguientes cajas > > > (DIV): > > > (1) cabecera(header) > > > (2) tres columnas: navegación izquierda(leftnavbar), contenido > > > central(content), navegación derecha(rightnavbar) > > > (3) pie de página (footer). > > > Todas estan contenidas dentro de un contenedor principal > > (container). > > > El problema que tengo es que quiero que las tres columnas > > centrales me > > > ocupen el 100% de la caja contenedora y lo hace pero > > realmente se pasa > > > del tamaño del contenedor e incluso hay un overlap con la > > capa pie de > > > página. Aquí les dejo el CSS y el HTML para que me digan > > que anda mal con esto: > > > > > > CSS: > > > html { > > > height: 100%; > > > color: #000; > > > background: #E1E1E2; > > > } > > > > > > body { > > > height: 100%; > > > color: inherit; > > > background: #E1E1E2; > > > font-family: tahoma, verdana, arial, helvetica, arial, > > > "sans-serif"; > > > font-size: .71em; > > > padding: 0; > > > margin-top:5px; > > > text-align: center; /*para centrar en IE 5 o inferior*/ } > > > > > > /* > > > > > -------------------------------------------------------------- > > ----------------------------------------------- > > > Posicionamiento de los DIV contenedores u otros que forman el > > > esqueleto de la página > > > > > > > > ---------------------------------------------------------------------- > > > -----------------------------------------*/ > > > /* Contenedor principal */ > > > #container { > > > width: 760px; > > > height: 100%; > > > text-align: left; /*alínea a la izquierda nuevamente*/ > > > margin: 0 auto; /* para centrar en navegadores modernos */ > > > position: relative; > > > border: 1px solid #0B198C; > > > background-color: Black; > > > } > > > /*Contiene el banner o cabezal del Portal y otros > > elementos*/ #header > > > { > > > width: 760px; > > > height: 210px; > > > background-color: Fuchsia; > > > } > > > /*Barra de navegación izquierda*/ > > > #leftnavbar { > > > width: 24%; > > > height: 100%; > > > float: left; > > > background-color: #A0522D; > > > } > > > /*Barra de navegación izquierda*/ > > > #rightnavbar { > > > width: 24%; > > > float: left; > > > background-color: Yellow; > > > } > > > /*Contenido central*/ > > > #content { > > > width: auto; > > > float: left; > > > background-color: #ADFF2F; > > > } > > > /*Pie de página, copyright u otros*/ > > > #footer{ > > > clear: both; > > > background-color: #FF4500; > > > } > > > > > > > > > HTML: > > > <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " > > > http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> > > > <html xmlns="http://www.w3.org/1999/xhtml";> > > > <head> > > > <meta http-equiv="Content-Type" content="text/html; > > charset=utf-8" /> > > > <title>Joomla SIMPRO Template</title> <link href="style.css" > > > rel="stylesheet" type="text/css"> </head> <body> > > > <div id="container"> > > > <div id="header"> > > > Aqui va la cabecera del portal > > > </div> <!-- Cierre de la cabecera --> > > > <div id="leftnavbar"> > > > Aqui el contenido de la barra de navegacion > > > derecha > > > </div> <!-- Cierre de la barra de > > navegación izquierda --> > > > <div id="content"> > > > Aqui el contenido de la barra de navegacion > > > derecha > > > </div> <!-- Cierre del contenedor central --> > > > <div id="rightnavbar"> > > > Aqui el contenido de la barra de navegacion > > > derecha > > > </div> <!-- Cierre de la barra de > > navegación derecha --> > > > <div id="footer"> > > > Aqui el contenido de la barra de navegacion > > > derecha > > > </div> <!-- Cierre de footer --> > > > </div> <!-- Cierre de contenedor --> </body> </html> > > > > > > Adjunto la dirección de una imagen que subí a la web para > > que vean más > > > claro el problema: > > > http://img295.imageshack.us/my.php?image=nuevodiseno8xi.jpg > > > Espero por sus respuestas > > > Salu2 > > > -- > > > ReynierPM | Kubuntu 5.10 | Linux User:#310201 Hay dos cosas > > infinitas: > > > el Universo y la estupidez humana. Y del Universo no estoy seguro. > > > _______________________________________________ > > > Lista de distribución Ovillo > > > Para escribir a la lista, envia un correo a [email protected] > > > Puedes modificar tus datos o desuscribirte en la siguiente > > dirección: > > > http://ovillo.org/mailman/listinfo/ovillo > > > > > > > > > > > -- > > NEO_JP > > http://neojp.cristalab.com/ > > _______________________________________________ > > Lista de distribución Ovillo > > Para escribir a la lista, envia un correo a > > [email protected] Puedes modificar tus datos o > > desuscribirte en la siguiente dirección: > > http://ovillo.org/mailman/listinfo/ovillo > > > _______________________________________________ > Lista de distribución Ovillo > Para escribir a la lista, envia un correo a [email protected] > Puedes modificar tus datos o desuscribirte en la siguiente dirección: > http://ovillo.org/mailman/listinfo/ovillo > -- Jaime F. Martínez Figueroa [P!]Wack in the net, visit http://alumnos.elo.utfsm.cl/~jmartinez/ Q+Sign at http://qsign.us.to _______________________________________________ Lista de distribución Ovillo Para escribir a la lista, envia un correo a [email protected] Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://ovillo.org/mailman/listinfo/ovillo
