Empujar un div a otro hacia abajo

themaz #1 Feb '12

Hola, escribo este post porque llevo un tiempo con el mismo problema y no consigo resolverlo. Se que debe ser una propiedad de CSS pero no la encuentro así que escribo el post a ver si me podéis ayudar.

El problema es el siguiente:

Tengo 2 divs, uno encima del otro, solo que el de arriba, tiene la propiedad display:none. Mediante jQuery, muestro el div de arriba quedando este por debajo del div de abajo. Lo que me gustaría hacer es que si este div oculto tiene 100 píxels de alto, al mostrarlo, el div de abajo se desplace 100 píxels y no quede sobre encima del anterior.

¿Sabéis como puedo resolver el problema?

Básicamente lo que quiero es que un div empuje al otro al aparecer.

Saludos

EnZo #2 Feb '12

Ponle a la capa de arriba display:block cuando quieras mostrarla.

themaz #3 Feb '12

No funciona, sigue comportándose de la misma forma. He comprobado con

var display = $(this).css("display"); 
$("#cuerpoLadoDerecho").html("Este div es " +  display + "");

para ver si toma esta propiedad y si la toma, muestra block

EnZo #4 Feb '12

Le pones display:none para ocultarla o para que?

La de abajo tiene algun valor en el atributo display?

themaz #5 Feb '12

La oculto con display:none y la muestro con fadeIn() con un evento mouseover.

El div que se encuentra abajo no tiene ninguna propiedad y el css de la que oculto es el siguiente :

#div{ width: 100%; background-color:#F6F6F6; color:#FFF; margin: 20px 0px 0px 0px; margin: 0px; display: none; }

GreyShock #6 Feb '12

Y el css de la que debería empujar? Tiene float o algo así? Podrías poner la maquetación de los dos divs y su trocito de css relacionado? Así será más fácil encontrar el fallo

themaz #7 Feb '12

El div subMenuAutor es el que esta con display:none y el cual activo con jQuery con fadeIn(). El comportamiento del div es el correcto pero al aparecer, este aparece tapado por la capa de cuerpo.

Lo que quiero es que al aparecer el div subMenuAutor, si necesita más espacio vertical, que empuje hacia abajo el div "cuerpo".

Este es el html :

<div id="menu">
        <div id="subMenuAutor">
        	<ul class="subMenu">
            	<li><a href="#">e</a></li>
            </ul>
    	</div>
</div>
<div id="cuerpo">
    	<div id="cuerpoLadoIzquierdo">
        	a
        </div>
        <div id="cuerpoLadoDerecho">
        	a
        </div>
</div>

y el css :

#menu{ padding: 0px; width: 100%; height: 40px; vertical-align: middle; margin: 0px; border-bottom: 1px solid #900; }
.subMenu{ margin: 0px; padding: 0px; background-color:#000; }
.subMenu li { display: inline; height: 30px; line-height: 30px; margin:0px; padding: 0px 20px 0px 20px; text-align:center; }
.subMenu li a { color:#FFF; font-size: 12px; }
.subMenu li a:hover { text-decoration: underline; color:#09F; }

#cuerpo{ padding: 20px 0px 20px 0px; min-height: 100px;}
#cuerpoLadoIzquierdo{ float: left; width: 470px; background-color:#0F3; margin-right: 20px; height: 100%; }
#cuerpoLadoDerecho{ float: right; width: 470px; background-color: #009; height: 100%; }

Gracias de antemano

EnZo #8 Feb '12

Prueba quitando el height al #menu. Que presupongo que lo que está oculto es mas alto que 40px

themaz #9 Feb '12

Cierto... gracias, mira que llevaba rato mirando y estaba ya bloqueado pero no encontraba el fallo.

¡Muchas gracias !

Empujar un div a otro hacia abajo

Usuarios habituales

Tags