XHTML&CSS - Problema con DIV & arrotondamento angoli

Allora, sto cercando di trasformare un sito da me creato, con layout composto interamente da tabelle, in una struttura composta da DIV.

Vediamo ad esempio questa pagina: http://www.webmasterpoint.org/webdesign/css/09.asp

Facile, e funziona.
Ma se si tiene conto che quei due DIV sono racchiusi in un DIV più grande che è largo il 70% della pagina ed allineato al centro, le cose si complicano.

Sì, perché IE mi visualizza tutto correttamente, mentre Firefox anzitutto non mi allinea il grande DIV al centro, ed inoltre avendo quei due piccoli DIV impostata la proprietà "float" a "left", escono fuori dal DIV che li contiene.

Quindi la domanda è: come si fa ad incapsulare più DIV in un ununico più grande senza "sballature"?

------------------------------------------

Richiesta N° 2

Ho creato uno "script" CSS che mi crea dei box con gli angoli tutti arrotondati, e borda il tutto con un colore da me scelto (nell'esempio sotto è il blu).
Ecco i relativi codici CSS e HTML:

div.box,div.box_top,div.box_bottom{
	background-color: #FF0000;
	border-left: solid #0000FF 1px;
	border-right: solid #0000FF 1px;
							}
div.box_top		{	border-top: solid #0000FF 1px;	}
div.box_bottom	{	border-bottom: solid #0000FF 1px;	}

<div style="width: 170px; height: 7px;">
<div class="box_top" style="margin: 0px 6px 0px 6px; height: 1px;">&nbsp;</div>
<div class="box" style="margin: 0px 4px 0px 4px; height: 1px;">&nbsp;</div>
<div class="box" style="margin: 0px 3px 0px 3px; height: 1px;">&nbsp;</div>
<div class="box" style="margin: 0px 2px 0px 2px; height: 2px;">&nbsp;</div>
<div class="box" style="margin: 0px 1px 0px 1px; height: 2px;">&nbsp;</div>
</div>

<div class="box" style="width: 168px;">
CONTENUTO BOX
</div>

<div style="width: 170px; height: 7px;">
<div class="box" style="margin: 0px 1px 0px 1px; height: 2px;">&nbsp;</div>
<div class="box" style="margin: 0px 2px 0px 2px; height: 2px;">&nbsp;</div>
<div class="box" style="margin: 0px 3px 0px 3px; height: 1px;">&nbsp;</div>
<div class="box" style="margin: 0px 4px 0px 4px; height: 1px;">&nbsp;</div>
<div class="box_bottom" style="margin: 0px 6px 0px 6px; height: 1px;">&nbsp;</div>
</div>

Con Firefox è tutto perfetto, mentre IE mi allunga i bordi superiori ed inferiori in modo da far somigliare il box ad un aquilone fatto male...

Mi appello a voi...

[dementialsite]

Alla prima domanda posso risponderti per esperienza personale: IE e Firefox interpretano in modo diverso le percentuali. Per la precisione, IE le calcola con riferimento al componente superiore (leggi: il DIV che contiene i due DIV del layout), Firefox invece con riferimento al componente principale (leggi: l'intera pagina).

Si risolve in un modo piuttosto semplice: imposti la larghezza dei DIV usando la proprietà width per IE e max-width per Firefox. A queste dovrai impostare le seguenti percentuali: su max-width devi rapportarle usando come parametro la dimensione del DIV superiore (nel tuo caso, essendo pari al 70%, dovrai impostare le width a 20%/80% e le max-width a 14%/56%).

Stammi bene...

Ho provato, ma nn va.

Se a qualcuno interessasse, il layout tabellare (abbastanza complesso, quello dei due div era solo un esempio) che io ho intenzione di trasformare in un insieme di DIV è il seguente:

http://unsolosito.netsons.org/licatachapter/home.php

EDIT:

Per il problema degli angoli arrotondati ho capito dove sta il problema con IE:

anche un semplice codice come il seguente:

<div style="height: 1px; background-color: #FF0000;">

</div>

Viene letto bene da Firefox, mentre IE sembra non considerare minimamente quel "height: 1px;"...

EDIT2:

YEEESSS!!!! Ho risolto con un semplice "overflow: hidden;"

EDIT3: Bene... ora nn resta che cercare di risolvere il "problemone" del layout tableless...

EDIT4: Vi tengo aggiornati in pratica ho impostato la proprietà float: left solo al primo dei due DIV interni, e con Firefox tutto fila liscio, mentre con IE il secondo DIV viene visualizzato a capo... come mai?

EDIT5 (visto che nessuno risponde...): ok, va a capo x il semplice motivo che entrambi i DIV dentro il DIV grande in fila nn c stanno; e siccome come detto da demential le percentuali vengono interpretate diversamente dai due browsers, c'è un macello :S ci sono i bordi che si prendono 1-2 pixel ciascuno, e quindi siam già fuoristrada; inoltre io voglio impostare a 5-10 pixel i margini... e siccome i due browsers m metono le larghezze diverse, in FF ci entrano entrambi, e quindi si vede bene, mentre in IE son troppo grandi e quindi il secondo va a capo