Hola, Chan:
Gracias por tu respuesta y también por tu pelín de ironía, que me has
alegrado la mañana, pero te agradecería que me explicaras, aunque fuera en
inglés, qué quieres decir con eso de "convertir tu `div` contenedor en un
auténtico contenedor".
Me he repasado el modelo de cajas en la especificación y no veo la razón
por la que mi div contenedor no sea un contenedor de los elementos
incluidos en él.
Es más, estoy segura de haber utilizado esto alguna vez más, en parecidos
ejemplos algo más complicados, seguro que me funcionaron por chiripa, pero
ahora quiero salir de la chiripa.
Por los documentos a los que me remites me da la sensación de que me has
interpretado justo al revés de lo que me ocurre, porque precisamente esta
vez se me comporta como si el div contenedor fuera un elemento float y yo
le hubiera metido un clear antes de los otros float, porque
impepinablemente me los coloca debajo de la caja contenedora.
Para tu tranquilidad te diré que antes de pedir árnica jugué bastante con
"clear" y lo único que hacía era empeorar la cosa amén de complicarla
innecesariamente. Lo que yo quiero hacer es tan sencillo que tiene que ser
una tontería lo que se me escapa, pero no la veo.
En fin, seguiré probando y remirando los float y gracias por los
documentos, que sí que son interesantes.
María del Carmen Ugarte García
"Choan C. Gálvez"
<[EMAIL PROTECTED]
e.com> To
Sent by: "Ovillo, la lista de CSS en
[EMAIL PROTECTED] castellano"
sts.ovillo.org <ovillo@lists.ovillo.org>
cc
01/06/2005 17:37 Subject
Re: [Ovillo] A vueltas con los div
y los floats
Please respond to
"Ovillo, la lista
de CSS en
castellano"
Carmen, encontrarás mi respuesta más abajo
Carmen Ugarte Garcia escribió:
> Ando dando vueltas a un ejemplo simple y tonto pero en el que no termino
> de encontrar el fallo:
>
> Tengo una caja contenedora definida de la siguiente manera:
> .contenedor {margin: 30px; border: solid 1px; background-color: white;}
>
> y dentro de esa tras una cabecera de tipo 1 quiero meter las clásicas dos
> columnas, una a la izquierda y otra a la derecha:
>
> .izda {float: left; width: 40%; padding: 10px; margin: 5px;
> background-color: blue; }
> .dcha {float: right; width: 40%; padding: 10px; margin: 5px;
> background-color: red;}
>
> (los colores de fondo los he metido solo para ver si encontraba pistas)
>
> y en HTML
>
> <div class="contenedor">
>
> <h1>Título</h1>
> <div class="izda">
> <ul>
> <li>...</li>
> </ul>
> </div>
>
> <div class="dcha">
> <ul>
> <li>...</li>
> </ul>
> </div>
> </div> <!--- contenedor--->
>
> Pues digamos que la capa "contenedor" se me cierra antes de empezar las
> otras, colocándose estas debjao de aquella.
>
> He probado a quitar la cabecera <h1> pero entonces me sale una raya, es
> decir la capa "contenedor" se me reduce a una raya.
>
> ¿Qué me falta, que no lo veo?
Pues te falta convertir tu `div` contenedor en un auténtico contenedor.
Si dominas el inglés, deberías leer, para empezar [Containing
Floats][1]. Si no lo dominas, estás perezosa o [inserte aquí cualquier
excusa], todos estos mandamientos se resumen en...
1. Puedes hacer que el `contenedor` sea realmente un contenedor, tachan
tachan, haciéndolo flotar o
2. Puedes hacer que el `contenedor` se expanda incluyendo tras los
elementos flotantes un elemento "limpiador", esto es, un `<div
class="loqueteapetezca"></div>` con un estilo asignado tal que
.loqueteapetezca { clear: both; }
o
3. Puedes hacer que el contenedor se expanda aplicando la novísima
técnica del `overflow`, consistente en asignar al contenedor un
`overflow: auto;`.
Si mis palabras no te convencen, oh incrédula, puede que las de otros lo
hagan: échale una ojeada a [Clearing Space][2] en el [wiki de
CSS-Discuss][3]
[1]: http://www.complexspiral.com/publications/containing-floats/
[2]: http://css-discuss.incutio.com/?page=ClearingSpace
[3]: http://css-discuss.incutio.com/?page=FrontPage
Salud,
Choan
--
Mundo Du. Cuentos breves, relatos sorprendentes
http://du.lacalabaza.net/
Dizque. Cosas que me van y me vienen
http://dizque.lacalabaza.net/
_______________________________________________
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://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://ovillo.org/mailman/listinfo/ovillo
