[Ovillo] Problemas con las alturas

AraDaen aradaen en gmail.com
Jue Feb 1 20:39:51 UTC 2007


La verdad es que no había leido el comienzo el hilo :S

Bueno, pero ahora que ya lo he hecho, creo que como dice sn, la opcion
de flotar las columnas, y hacer un clear del contenedor es válida.

Si no deseas añadir elementos extras a tu codigo para hacer el clear,
puedes hacerlo por medio de css con after y content (clearfix):

[css]
<style type="text/css" >
#contenedor{
    position:relative;
    }

#contenedor:after{
    content: ".";
    display: block;
    height: 0;
    clear:both;
    visibility: hidden;
    }   
   
    #izq{
        float:left;
        width:150px;
        background-color:red;
        min-height:400px;
    }
    #centro{
        margin:0 210px 0 160px;
        background-color:#999999;
        }
    #der{
        float:right;
        width:200px;
        background-color:green;
        min-height:400px;
        }
#pie{
    background-color:blue;
    min-height:50px;
    }
</style>

<!--[if IE 6]>
<style type="text/css" >
    * html #contenedor{
    height:1px;
    }
</style>
<![endif]-->
<!--[if IE 7]>
<style type="text/css" >
#contenedor:after {
    display:block;
    }
#contenedor{
    display:inline-block;
    }
</style>
<![endif]-->
[/css]

Para los ie es necesario añadir algo de css, por eso he puesto los
condicionales.

Y respecto al html, sería necesario que primero introdujeras las
columnas flotadas, y posteriormente, el div central. El html quedaría
tal que:

<div id="contenedor">
    <div id="izq"></div>
    <div id="der"></div>   
    <div id="centro">   </div>
</div>
<div id="pie">PIE</div>


Saludos.



Más información sobre la lista de distribución Ovillo