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 Ovillo@lists.ovillo.org
> 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 Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://ovillo.org/mailman/listinfo/ovillo
