Perdón, no está bien explicada la primera opción sobre los floats, la de
poner un elemento con *clear:both*.
Este elemento debe de estar *justo después de los floats pero aún dentro del
contenedor* para ser efectivo, no como te he dicho antes. Así:
Espero no haberte liado más... :)
El 19 de septiembre de 2009 16:27, Reactivo Química Visual <
conta...@reactivo.es> escribió:
> Hola Jose Manuel,
> Para que el contenedor de los float se adapte al tamaño de los mismos,
> tienes varias opciones:
>
> - la clásica, que es añadir un elemento con *clear:both* justo después
> de dicho contenedor (por ejemplo, un div vacío o un *<br
> style="clear:both" />*, o tal vez añadirle esa declaración al elemento
> que ya tengas y que venga a continuación).
> - una más actual que evita la inclusión de elementos innecesarios en el
> HTML, que es añadir la propiedad overflow al contenedor de los floats (ej.
> *overflow:auto*). Esta es mejor pero a veces crea problemas con barras
> de scroll no deseadas.
>
> Prueba a ver cuál se adapta a lo que quieres hacer.
>
> Respecto a lo de hacer que un div ocupe el 100% de alto, es un tema
> bastante tratado en internet sobre todo por el hecho de conseguir un pie que
> se quede siempre pegado al borde inferior de la página independientemente
> del contenido. Ahora mismo no creo que pudiera darte una respuesta adecuada
> sobre cómo hacerlo, seguro que alguien en esta lista puede explicártelo
> mejor que yo.
>
> Un saludo,
> Diego.
>
> El 19 de septiembre de 2009 15:27, Jose Manuel Segovia <
> josego...@gmail.com> escribió:
>
> 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>
>> _______________________________________________
>> 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
