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 [email protected]
Puedes modificar tus datos o desuscribirte en la siguiente direcci�n:
http://ovillo.org/mailman/listinfo/ovillo
