Centar div verticalmente en otro DIV (IE)

[reyesoft]

Preciso alinear verticalmente un div que se encuentra dentro de otro div que su altura de la cantidad de texto que posea.

En Firefox funciona a la perfección, pero en IE no (que raro! )

CSS

Código:

#padre {
    position:relative;
}
#hijo {
    position:absolute;
    top:50%;
    height:10px;
    margin-top:-5px;
}

HTML

Código HTML:

<p>Párrafo fuera del padre 1</p>
<p>Párrafo fuera del padre 2</p>
<div id="padre">
    <div id="hijo">cargando...</div>
    <p>Párrafo 1</p>
    <p>Párrafo 2</p>
    <p>(pueden haber muchos más párrafos)  </p>
</div> 

El problema es que IE toma top:50%; como el 50% del body y no de #padre; haciendo que el div #hijo se muestre mucho más abajo.

Desde ya muy agradecido por su constante ayuda.

[Mikmoro]

Creo que se debe a que el padre no tiene tamaño de alto definido y no sabe interpretar el 50% de "nada".

Mikel.

[reyesoft]

Iniciado por Mikmoro

Creo que se debe a que el padre no tiene tamaño de alto definido y no sabe interpretar el 50% de "nada".

Claro, como está en el ejemplo, no puedo definir el alto, porque varía de acuerdo a la cantidad de texto.

Igualmente gracias.... ¿Alguna otra pista colegas?

[Mikmoro]

No había entendido que por lo visto el problema ya lo tenías identificado, y que lo que buscabas era cómo solucionarlo.

Prueba añadiendo esto al selector "padre":

height: auto ! important;
height: 10px;

Mikel.

[reyesoft]

Muy agradecido Mikmoro. Funcionó a la perfección.

Saludos!

[ReSPawn]

Buenas, Tengo un problema parecido con IE:

Quiero que los divs categories y partner aparezcan centrados dentro de center, pero partner aparece encuadrado arriba a la derecha de center.

div#central{
position:relative;
BORDER: #EA3B3E 1px solid ;
height: auto;
}
div#categories {
position: relative;
float:left;
left:10px;
top: 50%;
background-color: white;
float:left;
}
div#partner {
position:absolute;
width: 50%;
top: 50%;
BORDER: #EA3B3E 1px solid ;
float:right;
}

HTML:

<div id="central">

<div id="partner" align="left">
<font color="red"> blahbalhbalh </font>
Come And Download For Free<br/>
<a href="http://www.blahblah.com/">->GO</a>
</div>

<div id="categories">
<font size='3'><br> Categories: <br/></font>
<font size='2' color='blue'>
<br><input type='radio' /> <u> Foo </u> <br/>
<br><input type='radio' /> <u> Foo </u> <br/>
<br><input type='radio' /> <u> News </u>
</div>
</div>

¿¿Alguna idea??

Gracias!

[punegas]

Prueba esto a ver que tal, ya nos dices.

div#central{

width:70%; /*Ancho del contenedor*/
margin: 20px auto; /*Centrar el contenedor en la página*/
height: 400px; /*Altura del contenedor*/
border: #ea3b3e 1px solid;

}

div#partner{

width:50%;
margin-top:10%;
float:left;

}

div#categories {

margin-left:50%;
margin-top:10%;
border: #ea3b3e 1px solid;

}

[ReSPawn]

Gracias Por la Respuesta!

Olvidé mencionar que la página tiene que verse desde un dispositivo móvil (y que quiero que partner quede a la derecha de categories). He modificado el código así:

div#central{

width:100%; /*Ancho del contenedor*/
margin: 0px auto; /*Centrar el contenedor en la página*/
height: auto; /*Altura del contenedor*/
border: #ea3b3e 1px solid;

}

div#partner{

width:50%;
margin-top:10%;
float:right;

}

div#categories {

margin-left:0px;
margin-top:0px;
border: #ea3b3e 1px solid;

}

Me parece un buen punto de partida, pero aún así el div partner ahora se ve debajo del div categories a la derecha (y da la impresión de que está fuera de center, cosa que no entiendo, porque los divs categories y partner los tengo rodeados con el central en el html)

Me gustaría centrarlos horizontalmente y verticalmente.

[ReSPawn]

Bueno, como ya he hallado la socución y seguro que a alguien más puede interesarle, pues me respondo a mí mismo, la solcuión es:

div#central{

width:100%;
margin: 0px auto;
height: auto;
height: 10px;
}

div#partner{
width:50%;
margin-top:15%;
float:right;
}

div#categories {
width:40%;
margin-left:0px;
margin-top:0px;
float:left;
}

Ala pues, Suerte y Gracias!!