Mi div no agrupa otras divs..

[astut]

Hola, observen esta imagen primero: (ponganle el htttp)
img505.imageshack.us/my.php?image=capturadami2.jpg
Y luego este codigo:

Código HTML:

<div class="caja_contenedor">
  <div class="caja_seccion">Produccion (recursos generados por dia)</div>
	<div class="caja_contenido">
		<!--Poblacion-->
  	<div style="width: 50%; float: left;">Poblacion:</div>
		<div style="width: 50%; float: right;"><?php echo "$poblacion"; ?></div>
		<!--Agua-->
		<div style="width: 50%; float: left;">Agua:</div>
		<div style="width: 50%; float: right;"><?php echo "$agua"; ?></div>
		<!--Comida-->
		<div style="width: 50%; float: left;">Comida:</div>
		<div style="width: 50%; float: right;"><?php echo "$comida"; ?></div>
		<!--Madera-->
		<div style="width: 50%; float: left;">Madera:</div>
		<div style="width: 50%; float: right;"><?php echo "$madera"; ?></div>
		<!--Oro-->
		<div style="width: 50%; float: left;">Oro:</div>
		<div style="width: 50%; float: right;"><?php echo "$oro"; ?></div>
		<!--Piedra-->
		<div style="width: 50%; float: left;">Piedra:</div>
		<div style="width: 50%; float: right;"><?php echo "$piedra"; ?></div>
		<!--Metal-->
		<div style="width: 50%; float: left;">Metal:</div>
		<div style="width: 50%; float: right;"><?php echo "$metal"; ?></div>
	</div>
</div> 

La cosa esque donde veis "poblacion", "comida", "agua" etc.. y sus respectivos numeros debajo deberia haver un fondo, es decir, estos son divs que estan dentro de otro div pero no es asi, aparecen fuera de este, ¿porque?, espero una respuesta gracias ^^

[astut]

solucionado..

Código HTML:

<div style="clear: both"></div> 

Problema de posicionamiento de divs con float

[Shade]

Avisar para los que entran y no saben exactamente como lo resolvió..

Poniendo <div style="clear:both"></div> AL FINAL del contenido, pero antes del ultimo cierre de </div> consigues que el div que contiene las cosas considere los div's flotantes que tiene dentro y se extienda hasta el ultimo de ellos.

Solo por las dudas.

[webosiris]

astut, ese código html tiene una divitis hiper-aguda..
en este caso concreto según veo en la imagen son datos tabulares, por lo que deberías de usar una tabla

Se que existe actualmente una fobia hacia las tablas, pero las tablas no son malas si se usan para lo que fueron creadas (tabular datos)

Es tan perjudicial posicionar un diseño con tablas, como tabular datos con capas..

[eContento]

Iniciado por webosiris

...Es tan perjudicial posicionar un diseño con tablas, como tabular datos con capas...

Totalmente deacuerdo con webosiris.
Las tablas deberían maquetarse con tablas y no con divs.
No hay que confundir las tablas que se usan para definir una estructura de maquetación, y las que se usan para mostrar datos tabulados.

En cualquier caso, y aún usando divs, ¿no habría sido más fácil darle un ancho a la primera columna, con un float left, y un padding-left a la segunda con el ancho de la primera...? así, te quitas los float right...

[astut]

Vale, vale usare tablas para mostrar datos =) gracias

[marcelomdsc]

webosiris....estoy totalmente de acuerdo!!!