Texto sobrepasa div

[juanpro]

Un coordial saludos a todos de este foro, mi consulta es la siguiente:

http://www.juanhh.com/web/designer.html

Es una web que estoy haciendo, el error esta en que el texto sobrepasa el div que esta en la parte de abajo en IE. se ve bien pero en Firefox se ve asi, aqui dejo el codigo par que me puedan ayudar por favor.

#box-interiores{
width: 734px;
height: auto;
font-family:Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 19px;
color:#000000;
margin: 0px auto;
padding-top: 40px;
}

Este es el div donde va el texto con la foto,

Gracia de antemano
PD. Alguien que me recomiende de algun validador en css y xhtml
Gracias nuevamente

[Carlos Santany]

crea un div padre y le pones una propiedad overfload: auto;

o bien creas otro div al final y le asignas un clear: both;

veamos si puedo hacerte un ejemplo...

Ejemplo 1:

Código HTML:

#div1 {
height: auto ! important;
overfloat: auto;
PONES CUALQUIER OTRA PROPIEDAD QUE GUSTES
}

#div2 {
width: 734px;
height: auto;
font-family:Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 19px;
color:#000000;
margin: 0px auto;
padding-top: 40px;
}

<div id="div1">
  <div id="div2">
   CONTENIDO
   </div>
</div> 

Ejemplo 2:

Código HTML:

.ajustar {
clear: both;
}

#box-interiores {
width: 734px;
height: auto;
font-family:Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 19px;
color:#000000;
margin: 0px auto;
padding-top: 40px;
}


<div id="box-interiores">

AQUI PONES TODO EL CONTENIDO Y JUSTO ANTES DE TERMINAR, AGREGAS ESTO:

  <div class="ajustar"></div>
</div> 

El div de ajustar no debe contener nada, bueno espero te haya sido de ayuda, un saludo.

[Mikmoro]

En realidad, va a depender de cómo sean sus cajas contenedoras actuales, y si estas tienen tamaños fijos definidos y por tanto, si pueden crecer o no con su contenido.

La caja de texto no tiene problema porque no está flotada, no tiene alto definido y sólo contiene texto e imágenes.

Lo que debes hacer es actuar sobre las cajas contenedoras. Prueba a cambiar estas dos clases en tu hoja de estilo:

#box_cua_gen{
width: 814px;
height: auto ! important;
min-height: 488px;
height: 488px;
margin: 0px auto;
border: 1px solid #977BB8;
background-color:#FFFFFF;
}
#box_medio{
width: 814px;
height: auto ! important;
min-height: 333px;
height: 333px;
background-color: #F9F7FB;
}

Esas dos cajas tenían un alto fijo, y por mucho que hagas para que crezca la caja de texto, lo más que vas a conseguir es que las desborde.

Y de paso, puedes eliminar el height: auto de tu selector #box-interiores, que no es necesario (tal y como está ahora).

Mikel.