div che non si posiziona correttamente con FF

[bgiordy]

ciao a tutti

ho un #container con due div affiancati (#side e #content); volevo aggiungere un terzo div (#cerca) sotto il primo a sinistra (#side): tutto bene con IE ma con FF il div di destra (#content) invece di porsi a destra del primo (#side), si pone in basso a destra del secondo (#cerca).

per favore potete controllare dove ho sbagliato?

codice CSS

#container {
width: 800px;
margin: 0 auto;
background-image: url(images/cen.gif);
text-align: left;
}

#side {
width: 220px;
height: 450px;
float: left;
text-align: right;
background: url(images/gregorio.gif) no-repeat 40px;
padding: 30px 0px 0px 30px;
}

#cerca {
width: 220px;
float: left;
clear: left;
padding: 0px 0px 30px 30px;
}

#content {
width: 520px;
text-align: justify;
color: #2f4f4f;
font: 12px/1.5em Verdana, Geneva, Arial, Helvetica, sans-serif;
float: right;
padding: 30px 30px 30px 0px;
line-height: 18px;
}

.parifica {
clear: both;
}

codice HTML

<div id="container">
<div id="side">....</div>
<div id="cerca">....</div>
<div id="content">....</div>
<div class="parifica"></div>
</div>

grazie

bgiordy

[gabar-el]

le misure di #side e #content devono essere uguali o inferiori a quelle di #container se non non ci stanno dentro. quindi width + border + margin + padding dei due div devono essere uguali al width del contenitore. occhio che ie interpreta in modo diverso. a riguardo puoi trovare molte info on-line o qui sul forum cercando box model o bug 3px

[bgiordy]

grazie, ho controllato e le misure sono a posto.

Credo anche di avere risolto il problema, ma devo provarlo su altre pagine:

se sposto #cerca dopo #content, va tutto a posto su FF, ma devo ancora controllare opera e safari.

<div id="container">
<div id="side">....</div>
<div id="content">....</div>
<div id="cerca">....</div>
<div class="parifica"></div>
</div>

ciao e grazie

bgiordy