[Ovillo] Duda-Problema con float

Sab Sep 19 13:27:24 UTC 2009

Hola a todos,

Estoy atascado con unos probleimillas con unos float (no puedo vivir si
ellos pero con ellos tampoco).

Os cuento lo que me ocurre, quiero poner 4 divs (#areas_t1, #areas_t2,
#areas_t3, #areas_t4) alineados horizontalmente, y estos cuatro divs tienen
que estar dentro de otro div contenedor (#areas). La cuestión es que si no
les pongo float a los 4 divs de "areas" se quedan alineados verticalemnte,
así que los floto; Pero al flotarlos se salen de su contenedor #areas.

Mi primera pregunta es ¿Cómo hago para que esos 4 divs se queden dentro del
su contenedor #areas alinea horizontalmente uno al lado del otro?

Mi siguiente pregunta va un paso más, el #areas está a su vez dentro de otro
que se llama #content y me encantaría que este creciera verticalmente al
100%, es decir que ocupara el tamño completo en vertical de la pantalla. Yo
creía que con ponerle la altura al 100% ya salí pero no me hace caso ¿qué
hago mal?.

Os dejo aquí debajo tanto el CSS que estoy usando como el HTML. Y muchas
gracias por vuestra ayuda.

Saludos,

Jose

-------------------------------------------------
* {
    margin: 0;
}

html, body {
    height: 100%;
}

body {
    text-align:center;
}

#wrap {
    border: #CC0000 thin solid;
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto 0px auto;
    width: 100%;
    min-width: 790px;
    text-align: left;
}

#container {
    margin: 0 auto 0px auto;
    width: 790px;
    min-height: 100%;
    height: auto !important;
    height: 100%;
    border: #009900 thin solid;
    text-align: left;
    padding: 0px 0px 0px 0px;
}

#content {
    border: #CCCC00 thin solid;
}

#areas{
    border: #FF0000 thin solid;
    position: relative;
}

        #areas_t1{
            width: 165px;
            height: 143px;
            padding: 16px 0px 0px 19px;
            font-size: 0.88em;
        }

        #areas_t2{
            width: 165px;
            height: 143px;
            padding: 16px 0px 0px 19px;
            font-size: 0.88em;
        }

        #areas_t3{
            width: 165px;
            height: 143px;
            padding: 16px 0px 0px 19px;
            font-size: 0.88em;
        }

        #areas_t4{
            width: 165px;
            height: 143px;
            padding: 16px 0px 0px 19px;
            font-size: 0.88em;
        }

----------------------------------------------------

    <body>
        <div id="wrap">
            <div id="container">
                <div id="content">
                    <h1>
                        Bla Bla Bla
                    </h1>
                    <p>
                        Texto
                    </p>
                    <div id="areas">
                        <div id="areas_t1">
                            <p>
                                Area1
                            </p>
                        </div>
                        <div id="areas_t2">
                            <p>
                                Area2
                            </p>
                        </div>
                        <div id="areas_t3">
                            <p>
                                Area3
                            </p>
                        </div>
                        <div id="areas_t4">
                            <p>
                                Area4
                            </p>
                        </div>
                    </div>
                </div>
            </div>
           </div>
    </body>