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
