Div nidificati

[agenti]

Sto cercando di ottimizzare la struttura di layout similTabellare:

<style>
#main {width:100%;display:block;border:1px solid #7a95ff;font:12pt Tahoma;font-weight:bold;background-color:#eaf6fa }
#head   {width:100%;margin:3px;padding:2px;display:block;border:1px solid #7a95ff;background-color:#ff3300;text-transform:Capitalize;color:#ffffff;}
.span1 {float:left;margin-left:5px;margin-top:2px;}
.img_h {float:right;border:1px solid #000000;}
.prezzo {background-color:#d6e6f1;margin:2px;float:left;border:1px solid #7a95ff;height:66px;font:18pt;width:120px;color:#ffffff;line-height:66px;text-align:center;color:#ff3300;}
.corpo {float:left;height:30px;padding-top:5px;padding-left:4px;margin-top:2px;margin-left:2px;font:70% Tahoma;display:block;width:62%;}
.img_b {float:right;margin-top:2px;margin:1px;margin-right:3px;border:1px solid #7a95ff;height:67px;width:85px;}
</style>

<div style="width:62%;">

<div id="main">

<div id="head">
<span class="span1" >
<xsl:value-of select="type" />&#160;<xsl:value-of select="hotel" />&#160;(<xsl:value-of select="substring(star,1,1)" /> stelle)
</span>

</div>

<div class="prezzo">
€ <xsl:value-of select="quota" />
</div>

<div class="corpo">
<xsl:value-of select="address" />
<hr></hr>
Trattamento:&#160;<xsl:value-of select="meal" />

Camera:&#160;<xsl:value-of select="room" />
</div>

[img]{image1}[/img]
</div>
</div>

l'unico problema che trovo è: se rimpicciolisco la grandezza della finestra l'immagine di dx (img_b) si sposta in basso lasciandomi un gradino.
Il problema sembra sia dato dallo span "corpo" che non diminuisce al variare delle dimensioni della finestra.

Purtroppo però se questo capita a qualcuno con uno schermo 14 pollici con 800 x 600
succede un grande caos.

Come posso bloccare lo slittamento degli elementi rendendoli "block" come una tabella ?
Grazie.

[agenti]

UP... :quote: