Desborde de Capa

[damonmx]

Tengo un pequeño problema, estoy usando css para un sitio, pero mi problema es que una capa no se hace al tamaño de una interna. Aca me explico: Tengo una capa que contiene a todas las demas, tanto para el encabezado, contenido y pie. Mi proble radica en la de contenido, ya que esta su vez contiene tres capas mas una top, una medio y una pie; esto para lograr el diseño de una tabla de puntas redondeadas con sombra. Dentro de la de "medio" es donde coloco una capa mas para la informacion misma que llame "info" y otra mas que se llama "lateral".
Lo que quiero lograr es que la capa "medio" se haga al tamaño de la capa "info" o en su defecto al tamaño de la "lateral", es decir que conforme se vaya agregando informacion en las capas "info" y "lateral" y estas vayan aumetando su height, el height de la capa "medio" tambien vaya aumentando.
Espero haberme explicado bien aca dejo el codigo de las capas "medio" e"info" que son las del problema.

Código:

#contenido-medio  {
  			position: relative;
			width: 716px;
			height: 400px;
			background-image : url('imgs/medio.gif');
			background-repeat : repeat-y;
			background-position: 0% 100%;
			background-color: transparent;
			}

Código:

#info {
	 float: left;
	 position: relative;
	 width: 420px;
	 margin: 10px 0px 10px 10px;
	 border-top: solid #666666 2px;
	 padding:0px;
	}

Aca dejo el link dela pagina :

http://www.damonmx.net/pruebas/index.html

[frijolerou]

Te ayudo con algo rápido...

1-. Justo antes de cerrar el div "contenido-medio", agrega un div vacío y le asignas una clase (lo que ves en negrita es el tag de cierre de "contenido-medio"):
<div class="clear"></div>
</div>

2-. En el CSS quitale los height a "info" y "contenido-medio"

3-. Agrega el estilo para la clase "clear":
.clear{ clear:both; height:1px;}

[damonmx]

Pues me funciono se ha arreglado, muchas gracias por tu ayuda

Voy a investigar bien, que es lo que hace esto, ya que no me quedo muy claro, digo para cuando se me presente de nuevo sabeer que hacer. Apenas le estos entiendo poco a esto del CSS.

De nuevo muchas gracias

[frijolerou]

Te explico a groso modo...

Estuve buscando una solucion para no recurrir al html, pero como no recuerdo la página donde vi esa respuesta opté por hacer algunos cambios en el html.

1-. Le quité el height a esos 2 divs ya que en Firefox eso se usa para un tamaño fijo, y y el contenido es mayor (en este caso texto) este se desbordaria y el div seguria manteniendo la misma altura inicial, asi que quedaron sin tamaño definido.

2-. El div "contenido-medio" tal como mencionabas, tendria 2 divs interiores, "info" y "lateral". Como "info" es un elemento flotante, no hace crecer al div "contenido-medio" a medida que va teniendo más contenido. Entonces lo que hice fue agregar un tercer div vacio que hará de "separador" por decirlo de alguna manera (por eso le asigno solo 1px de altura). A ese div "invisible" le doy la propiedad clear:both; para que se vaya moviendo a medida que crece el div flotante que esta antes que el (en este caso "info"). Y el traslado de este DIV es el que influye en que "contenido-medio" vaya creciendo, a medida que en "info" agregas contenido.

[damonmx]

Doblemente gracias ya he entendido como es que trabaja ese div invisible, que la verdad ya me tenian loco eso dos div