[Ovillo] min-height con porcentajes

Thu, 26 Oct 2006 12:35:53 -0700 

Hola a todos, estoy intentando hacer un diseño que se adapte a las
medidas de la pantalla (líquido) tanto en ancho como en altura. En
ancho no vengo teniendo problemas, poniendo un with de x%, pero no
logro el mismo efecto con la altura, usando min-height y los hacks.
ie6 lo muestra bien, pero eso es porque le pongo height: x
directamente, en cambio ie7 y firefox 1.5 (flock para ser más
precisos), no ocupan el espacio. mando el código hipersimplificado.
Gracias por adelantado.

Guillermo


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd";>
        <head>
                <title>Home page 0.1</title>
                <link rel="stylesheet" type="text/css" href="styles/home.css">
        </head>
        <body>
                <div id="wrapper">
                        <div id="header">theflyonthewall.com</div>
                        <div id="main">
                                <div id="news"><h3>News</h3></div>
                                <div id="daily"><h3>Events daily 
Calendar</h3></div>
                                <div 
id="recommendations"><h3>Recommendations</h3></div>
                                <div id="syndicate"><h3>Syndicate</h3></div>
                                <div id="most_searched"><h3>Most 
Searched</h3></div>
                        </div>
                        <div id="footer"></div>
                </div>
        </body>
</html>


body {
        background-color: #006EBD;
        margin: 0;
        padding: 0;
}
#wrapper {
        margin: auto;
        min-width: 775px;
        min-height: 595px;
        height: auto !important;
        height: 595px;
        background-color: #fff;
}
#header {
        min-height: 35px;
        height: auto !important;
        height: 35px;
        background-color: #b3c6ec;
}
#main {
        min-width: 775px;
        min-height: 595px;
        height: auto !important;
        height: 595px;
}
#news, #daily, #syndicate, #most_searched, #recommendations {
        border: 1px solid #ccc;
        float: left;
}
#syndicate, #most_searched, #recommendations {
        min-height: 30%;
        height: auto !important;
        height: 30%;
}
#news, #daily {
        min-height: 70%;
        height: auto !important;
        height: 70%;
}
#news {
        width: 60%;
}
#daily {
        width: 39%;
}
#syndicate {
        width: 30%;
}
#recommendations {
        width: 30%;
}
#most_searched {
        width: 30%
}
#footer {
        clear: both;
        min-height: 30px;
        height: auto !important;
        height: 30px;
        background-color: #ccc;
}
_______________________________________________
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

Responder a