El contenedor "contenido" y "ladoa" están flotando con lo que se salen
del flujo normal del documento. En cambio "pie" no lo está flotando con
lo que el margen superior de este lo calcula
en este caso respecto a su caja contenedora ("contenedor") al decirle al
pie que no haya elementos flotando a sus lados (clear:both) te dibuja la
caja debajo de estas y como el margen superior (15px)
es inferior a la altura de los dos elementos flotantes (contenido y
ladoa), te da la impresión de que no se lo aplica (Prueba a poner
margin-top:1000px :)). La solución que le daria yo es flotar el pie y
darle un ancho del 100% del contenedor. Saludos.
Gerzo Karim escribió:
> Hola,
>
> basicamente mi layout css esta asi:
>
>
> body {
> margin:0 auto;
> text-align:center;
> }
>
> #contenedor {
> width:750px;
> margin:0 auto;
> text-align:left;
> }
>
> #contenido {
> background:#DDD;
> float:left;
> width:540px;
> }
>
> #ladoa {
> background:#00FF00;
> float:right;
> margin-left:10px;
> width:200px;
> }
>
> #pie {
> background:#FFFF00;
> margin-top:15px;
>
> }
>
>
> y en implementacion es algo mas o menos asi:
>
>
> <html>
> <head>
> <title>TEST...</title>
> <link rel="stylesheet" href="main.css" type="text/css" media="all">
> </head>
>
> <body>
>
> <div id="contenedor">
> <div id="contenido">
> <p>Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor
> sit amet Lorem ipsum dolor sit amet</p>
> </div>
>
> <div id="ladoa">
> <ul>
> <li>Link 1</li>
> <li>Link 2</li>
> <li>Link 3</li>
> </ul>
> </div>
>
> <div id="pie">
> <p>Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor
> sit amet Lorem ipsum dolor sit amet</p>
> </div>
> </div>
>
> </body>
> </html>
>
>
> pero el problema radica en que mi footer no funciona ni con IE ni con FF el
> atributo margin-top solo sirve el margin-bottom y no se por que!!!! se me
> pega mucho el #pie al #contenido :'(
>
> alguna idea???? necesito su ayuda!!!
>
> saLudOs
> _______________________________________________
> 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://lists.ovillo.org/mailman/listinfo/ovillo
>
>
_______________________________________________
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://lists.ovillo.org/mailman/listinfo/ovillo
