div contenido no empuja div principal

davidvaro · #1 (**permalink**) 18/12/2010, 19:26

Buenas tengo un problema con la altura del div principal, dentro de este div (vacio solo con background de color ) tengo un div contenido que es donde meto toda la informacion, la cosa es que el div contenido no empuja al div principal por lo que no le da la altura. como lo hago?

ejemplo:

Código:

<body>
<div class="principal">
	<div class="contenido">
    	       <p>Soy un voluntario.
No cobro nada por mi trabajo en Wikipedia, ni tampoco lo hace ninguno de nuestros miles de autores
</p>
    </div>
</div>
</body>

Código:

<style type="text/css">

.principal {
	background-color: #093;
	position: relative;
}
.principal .contenido {
	position: absolute;
	left: 13px;
	top: 79px;
}
</style>

Portgaz · #2 (**permalink**) 18/12/2010, 20:11

Código CSS:

Ver original.principal div.contenido {
left: 13px;
top: 79px;
}

_Adrian_ · #3 (**permalink**) 18/12/2010, 20:21

Cambia el position:absolute; (en .principal .contenido) a position:relative;

Saludos

GAST0N · #4 (**permalink**) 18/12/2010, 20:30

Cita:

Iniciado por davidvaro

Buenas tengo un problema con la altura del div principal, dentro de este div (vacio solo con background de color ) tengo un div contenido que es donde meto toda la informacion, la cosa es que el div contenido no empuja al div principal por lo que no le da la altura. como lo hago?

ejemplo:

Código:

<body>
<div class="principal">
	<div class="contenido">
    	       <p>Soy un voluntario.
No cobro nada por mi trabajo en Wikipedia, ni tampoco lo hace ninguno de nuestros miles de autores
</p>
    </div>
</div>
</body>

Código:

<style type="text/css">

.principal {
	background-color: #093;
	position: relative;
}
.principal .contenido {
	position: absolute;
	left: 13px;
	top: 79px;
}
</style>

quitale posicion absoluta al div contenido

Tsugoi · #5 (**permalink**) 18/12/2010, 21:18

quitale los position y ponle a ambos display: block;

davidvaro · #6 (**permalink**) 19/12/2010, 00:44

pero si les quito los absolute no podre moverlos no?

jomaruro · #7 (**permalink**) 19/12/2010, 04:23

Hola:

Y al div principal ponle overflow:auto.

Saludos.

kseso? · #8 (**permalink**) 19/12/2010, 08:33

Busque información sobre limpiar float. Sí ya sé que no lo tiene flotado, pero el efecto es el mismo: los elementos sacados del flujo (flotados, posicionados absolutamente...) del documento no fuerzan el crecimiento de su ancestro, entre otros efectos.
En www.librosweb.es encontrará información al respecto. Y Jomaruro ya le dio una pista.
En el enlace de abajo sobre la propiedad position verá las particularidades y qué implicaciones tienen los distintos valores.
Desconocemos las razones para declarar el valor "absolute". Desde ese desconocimiento me atrevo a sugerirle que lo cambie por "relative" y en vez de top/left use márgenes izquierdo y superior conjuntamente con overflow.

Desfaciendo enturtos (o no disparen sólo por incrementar sus contadores):
Portgaz:
¿Para qué los valores top/left si no lo posiciona? O mejor dicho, le asigna el valor static (que es el valor por defecto) y por lo tanto hay ciertas propiedades que no aplican.
GAST0N
Aplica lo anterior, con el agravante de que es repetición.
Tsugoi
Son propiedades distintas. Y un div, por defecto, ya es un elemento de bloque.
davidvaro

Cita:

pero si les quito los absolute no podre moverlos no?

Sí, siempre que tenga declarada posición con valor distinto al valor por defecto.

Para ampliar información y comprensión de esa propiedad pasen por la guía de migración sin dolor de Mikmoro Está como un tema importante en la parte superior de este foro. En concreto por el capítulo que le dedica a la posición.

Y por favor, procuren ser un poco más rigurosos al intentar ayudar a quien lo solicita. Que ciertas respuestas no sólo no es que no ayuden a resolver el problema, sino que lo que hacen, en el mejor de los casos, es crear confusión.