Preblemas con FF en Float y Contenedor

[vsdlg]

Tengo este codigo dentro del body:

<div id="container">

<div class="content">
<h3 align="center">Directorio Web</h3>

<div class="right">
<h2 class="caja">Buscadores/Correo</h2>
<h1 class="cajab">Pagina Hotmail<br>
Pagina Yahoo<br>
Pagina Gmail<br>
Pagina Altavista<br>
Pagina Msn search</h1></div>

<div class="right">
<h2 class="caja">Buscadores/Correo</h2>
<h1 class="cajab">Pagina Hotmail<br>
Pagina Yahoo<br>
Pagina Gmail<br>
Pagina Altavista<br>
Pagina Msn search</h1></div>


</div>

</div>


Y en el Css, tengo este:

#container {
line-height: 80%;
margin-right: auto;
margin-left: auto;
text-align: left;
padding: 0px;
width: 500px;
background-color: #F9F9F9;
border: 1px solid #FFFFFF;
}

.content {
padding: 0px 0px 0px 0px;
background-color: #FFFFFF;
border: 2px solid #EBEBEB;
margin: 1px auto;
color: #666666;
font-family: Verdana, Arial, sans-serif;
font-size: x-small;
}

.caja {

background: #F2F2F2;
font-family: Eurostile;
fon-size: 14px;
border: 1px solid #EBEBEB;
margin: 2px;
padding: 3px;

color: #000000;
}

h2 {
color: #000000;
font-family: Arial;
font-size: 12px;
}

h1 {
color: #000000;
font-family: Arial;
font-size: 11px;
text-align: left;
line-height: 110%;
}

.cajab {
border: 1px solid #000000;
margin: 2px;
padding: 3px;
with: 100px;
color: #000000;
}

.right {
float: left;
width: 155px;
overflow: hidden;


}



El problema es que cuando aplico los <div class="right">
el contendio (content) se sale del contenerdor (container), esto en Firefox, porque en IE si lo mete dentro del contenedor, pero no se porque sea, y desde hace mucho no entiendo el problema y me pasa seguido.

se supone que todo este dentro del contenedor:

<div id="container">


TODO LO DEMAS

</div>

No se porque cuando aplico las clases de right para alinear las cajas, se sale del contenedor o ya no lo abarca, y me doy cuenta obviamente porque el contenedor tiene un color de fondo y cuando pasa el problema se nota luego luego pues ya no lo abarca, ojala y me puedan ayudar.

[KnowDemon]

Hola,

Tu problema radica en lo siguiente: según las especificaciones del W3C el padre de un elemento "flotante" no debe adaptar su tamaño a su hijo, solo se adapta a los elementos que siguen el "flujo tradicional". En este caso IE es quien no cumple el estándar.

Puedes resolver el problema colocando un elemento en bloque (un div puede servir) después de tus elementos flotantes (deber ser su hermano), y asignarle la regla clear: both (o la que convenga). De esta forma, lo forzas a colocarse por debajo de los elementos "flotantes" y a su vez, forzas a su padre a adaptar su tamaño para contenerlo.

Espero que resulte clara la explicación.

PD: Te recomiendo que bautizes tus clases e Id's de acuerdo a su función y no su apariencia.

[vsdlg]

Entendido, muchas gracias, me resolviste dos problemas de un tiro.
supongo que algo asi te referias no?

<div style="clear: both;"> </div>

gracias.

[vsdlg]

Por cierto si sabia que IE era el que no respetaba los estandares, pero a veces es frustrante que ironicamente -- Se vea bien, por las razones incorrectas, ó, Se vea mal por las razones correctas.--- jajaja

[Durgeoble]

frustrante no creo que sea la palabra mas adecuada para describirlo, a mi un editor que no me da la opcion de elegir el motor de renderizado no me sirve por razones obvias

[emanuelt]

Hola, probando y buscando por la web llegué una solución.

Agregar al div contenedor:

display: inline-block;

esto hizo que funcione, no entiendo bien la lógica pero funcionó.

Saludos

[emanuelt]

encontré otra solucion.

agregar debajo de los div flotantes un div que no se verá

<div style="clear:both"></div>