DIV central automático

DAMOVEAR · #1 (**permalink**) 09/05/2011, 05:25

Buenas a todos.

Últimamente ando foreando mucho por unas dudas existenciales que me inundan.

Esto es sencillo, sólo que no le doy en el clavo.

Creé un DIV grande que tiene medidas en "auto" para que se reajuste a la pantalla.
Dentro, cree otro div con medidas 100x200 y float left, para que se vaya a la izquierda.
También cree otro div con medidas 300x200 y float right, para que siempre esté a la izquierda.

El problema está en el central.

El central debe reajustarse, ser automatico de medidas, pero no, no aparece, aunque le ponga "left" o "rigth" el bendito div no aparece.

¿Estoy omitiendo algún paso?

jomaruro · #2 (**permalink**) 09/05/2011, 13:26

Hola:

Busca información sobre columnas equilibradas, hay montones de preguntas sobre el particular en el propio foro.

Saludos.

Alucine · #3 (**permalink**) 10/05/2011, 10:14

fijate aqui por ejemplo: http://www.glish.com/css/7.asp

TEPO · #4 (**permalink**) 10/05/2011, 17:02

Eso es un problema muy comun en css, el tema es que los elementos que posicionas con float se salen del flujo del documento, la palabra lo dice, estan flotados y a su vez la propiedad float tambien afecta a sus contenedores, hay dos maneras de solucionarlo, flotando el div central, lo que tal vez no te serviria. Lo mas comun es que debajo de esos dos elementos flotados, coloques un div vacio, al cual con css le vas a dar la propiedad clear:left, de esta manera el div contenedor, va a hacer eso, contener a los flotados.
Ejemplo:

Código:

<html>
	<head>
		<title>Ejemplo</title>
		<link rel="stylesheet" type="text/css" media="all" href="estilo.css" />
	</head>
	<body>
		<div id="contenedor">
			<div id="derecha"></div>
			<div id="izquierda"></div>
			<div id="clear"></div>
		</div>
	</body>
</html>
</div>

En el css:

Código:

#contenedor{
	width:900px;
	background-color:blue;
	margin:auto;
	}
#derecha{
	float:left;
	width:400px;
	height:200px;
	background:red;
}
#izquierda{
	float:left;
	width:400px;
	height:200px;
	background:green;
	}
#clear{
	clear:both;
	}

Hay otras maneras de hacerlo, esta no es la mejor, ya que utilizas un div vacio.