YA NO TIENEN EL DIV DE COLOR VERDE CLARITO QUE ESTA EN LA GRAFICA DE ARRIBA, SOLO LO PUSE POR SI SERVIA PERO NO, ASI QUE PARA EVITAR MAYOR CODIGO LO QUITE.
ok bueno, ya pude solucionarlo, no de la forma que queria, pero bueno, intente con tu opinion de los float pero no funciono debido a que e contenedor es de posicion fixed.
codigo anterior (tu lo pediste :D )
Código CSS:
Ver original#padre{
background: rgba(0,0,0,.4);
z-index: 1111;
position: fixed;
bottom: 0;
right: 0;
}
#padre>i {/*serian los cuadritos verdes oscuros*/
transition: transform .5s;
cursor: pointer;
height: 60px;
width: 60px;
display: inline-block;
border-radius: 50%;
border: 2px solid #fff;
}
#padre>div{/*serian el cuadro grande verde oscuro*/
width: 267px;
height: 437px;
vertical-align: top;
transition: transform 1s, opacity .5s linear .3s;
resize: both;
overflow: hidden;
position: relative;
display: inline-block;
margin-right: 5px;
min-height: 150px;
padding: 4px 7px 4px;
min-width: 150px;
width: 200px;
border: 1px solid black;
border-radius: 7px;
height: 283px;
}
listos ahi esta el codigo.
ahora la forma en la que lo pude solucionar fue que cuando el #padre>div hiciera un fadeIn o una redimención con javascript le pondria un margin-top negativo(acerlo dinamico), aparte tambien le puse una altura fija a la ventana padre de 67px para que no se ajustara a sus ventanas hijas.
como lo deje:
Código CSS:
Ver original#padre {
height: 66px;
background: rgba(0,0,0,.4);
z-index: 1111;
position: fixed;
bottom: 0;
right: 0;
}
y el javascript
Código Javascript
:
Ver originalfunction se(tag){
return document.querySelector(tag);
}
function marginChat(cod, fx){//cod seria el seleccionador ejemplo: '#padre>div'
if(fx!==undefined)
se(cod).style.marginTop='0';
else
se(cod).style.marginTop='-'+(se(cod).offsetHeight-64)+'px';
}
y ya con eso la ventana padre nunca va acambiar de tamaño, lo único que cambia es el marginTop de la ventana hija "#padre>div"
SI tienes otra forma que sea solo con CSS te lo agradeceria