Divs problematicos

[camilo_1392]

Hola...

bueno, tengo el siguiente problema. tengo un div (cajaprincipal) que contiene otros 2 divs, (left y right), bueno, el problema viene al insertar texto o cualquier otra cosa a cualquiera de esos 2 divs, los divs aumentan su tamaño hacia abajo, pero el div cajaprincipalnno va aumentando, se queda pegado en donde esta...

css:

Código HTML:

#cajaprincipal {
	padding: 5px;
	background-image: url(/images/background.gif);
	background-repeat: repeat;
}
#wrapper {
	text-align: left;
	width: 740px;
}
.top {
	background-image: url(/images/top.gif);
	height: 10px;
	width: 738px;
	border: 1px solid #000000;
}
#left {
	float: left;
	width: 150px;
	margin-right: 5px;
}
#right {
	width: 585px;
	float: left;
}

el html

Código HTML:

<div id="cajaprincipal">
<!--ralla amarilla -->
<div class="top"></div>

<div id="left">Content for  id "left" Goes Here</div>

<div id="right">Content for  id "right" Goes Here</div>
</div>
<!--fin cajaprincipal --> 

espero que me hallan entendido, si necesitan alguna captura de pantalla si es que no entendieron pidanla.

gracias.

[Nigel]

Los elementos con la propiedad float se salen del flujo del documento, por lo que el elemento contenedor no puede calcular y adaptar su altura... digamos que aunque a efectos teóricos, las dos columnas están dentro del contenedor, a efectos prácticos, no forman parte de su flujo, es como si estuvieran fuera. Para resolverlo tienes que colocar un div adicional, a continuación de las dos columnas, y dentro del contendor, con la propiedad "clear:both", que le obliga a no tener nada a izquierda y derecha. Eso quiere decir por una parte, que está obligado a colocarse debajo de las dos columnas, y además, al estar dentro del contenedor, y estar también dentro del flujo del documento, obliga a éste (al contenedor) a adaptar su altura.

[camilo_1392]

exelente, me solucuiono el problema, muchas gracias!!!