Una DIV en firefox no se ve bien

[Operadormail]

Hola a todos

Tengo un div que agrupa otros 2 div dentro:

Código:

<div id="caja">
	<div style="float:left; width:130px; height:auto; text-align:center"><img src="images/c/wallpaper.jpg" width="115" height="86" alt="Fondo de escritorio Climbinz Zone" title="Fondo de escritorio"></div>
	<div style="float:right; width:430px; height:auto; text-align:left">Descargate nuestro fondo de escritorio.
	<p><a href="images/c/wallpaper_1024.jpg" class="enlacenav" target="_blank">1024x768</a>&nbsp;&nbsp;&nbsp;<a href="images/c/wallpaper_800.jpg" class="enlacenav" target="_blank">800x600</a></p></div>
	</div>

La definicion de # caja es:

#caja {
width:570px;
height:auto;
border: solid 1px #CCCCCC;
text-align:center;
margin-top:8px;
margin-bottom:8px;
clear:both
}

En IE caja hace un marco que abarca a las 2 div que tiene dentro, pero Firefox el marco aparece sobre las 2 div del interior...

No acierto a corregirlo... ayuda please

[fer10]

cuando usas eletementos flotante la w3c dice que no deven ser parte directa del contenido estan flotando SOLO IE hace eso, para corregirlo necesitas poner una div abajo de los float con clear:both aqui te paso un ejemplo:

CSS:
#caja {
width:570px;
height:auto;
border: solid 1px #CCCCCC;
text-align:center;
margin-top:8px;
margin-bottom:8px;
clear:both
}




HTML:
<div id="caja">
<div style="float:left; width:130px; height:auto; text-align:center"><img src="images/c/wallpaper.jpg" width="115" height="86" alt="Fondo de escritorio Climbinz Zone" title="Fondo de escritorio"></div>
<div style="float:right; width:430px; height:auto; text-align:left">Descargate nuestro fondo de escritorio.
<p><a href="images/c/wallpaper_1024.jpg" class="enlacenav" target="_blank">1024x768</a>&nbsp;&nbsp;&nbsp;<a href="images/c/wallpaper_800.jpg" class="enlacenav" target="_blank">800x600</a></p></div>
<div style="clear:both"></div>
</div>

Agrege la linea <div style="clear:both"></div>

[Operadormail]

muchas gracias.

Solucionado

Ahora tengo este problema

<div align="center" style="height:auto; width:615px; float:left; border: solid 1px #CCCCCC; margin-bottom:12px; text-align:center; background-image:url(images/e/tit_media.jpg); background-repeat:no-repeat; background-position:top">

</div>

Y el contenido no se alinea al centro en firefox.. en IE y Opera si... Dentro tengo la capa #caja que definí más arriba...

[fer10]

no entiendo el probelma, puse el codigo que me diste y lo veo centrado FF y en IE no se en que parte del contenido va, hojala puedas poner todo el codigo para poder ayudarte mejor.

[Operadormail]

Este es el codigo que no alinea en FF

<div align="center" style="height:auto; width:615px; float:left; border: solid 1px #CCCCCC; margin-bottom:12px; text-align:center; background-image:url(images/e/tit_media.jpg); background-repeat:no-repeat; background-position:top">
<p>&nbsp;</p>
<p>&nbsp;</p>
<div style="width:570px;
height:auto;
border: solid 1px #CCCCCC;
text-align:center;
margin-top:8px;
margin-bottom:8px"><img src="images/e/wallpaper.jpg" width="95" height="20"></div>
</div>

¿?

[fer10]

cuando pones bloque dentro de un bloque quieres alinearlo bloque no sirve la porpiedad text-align lo que tienes que hacer es usar para centrarlo es: marign:auto
algo asi.

<div align="center" style=" width:615px; float:left; border: solid 1px #CCCCCC; margin-bottom:12px; text-align:center; background-image:url(images/e/tit_media.jpg); background-repeat:no-repeat; background-position:top">
<p>&nbsp;</p>
<p>&nbsp;</p>
<div style="width:570px;
border: solid 1px #CCCCCC;
text-align:center;
margin-top:8px;
margin:auto;
margin-bottom:8px"><img src="images/e/wallpaper.jpg" width="95" height="20"></div>

</div>

[Operadormail]

funciono perfectamente.

Un saludo