All'interno del mio codice ho un blocco <div> al cui interno, spostato sulla sinista, c'è un altro blocco con proprietà float:left. Inserisco il testo (che mi viene posizionato a destra del div), ma il numero di caratteri del testo non supera la lunghezza vertivale del box con proprietà float. il blocco <div>, conterrà quindi il testo senza tenere conto della lunghezza verticale del blocco float, che si sovrappone in maniera alquanto strana sopra di esso. COme risolvo il problema?

Questo il risultato:
Pagina di prova

Importante: lo stesso difetto mi si presenta anche se al posto del blooco Float metto un'immagine con allineamento left


Questo il dodice del CSS:
html,body{
text-align: center; /*centra in IE 5.x */
margin: 0px auto;
padding: 0px;
height:100%;
}


div#container{
width: 960px;
margin: 0px auto; /*centra negli altri browsers*/
text-align: left; /*ripristina l' allineamento*/
height:100%;
}

/*blocco centrale*/
#desc{
float:left;
width:810px;
margin:0px;
height:100%;
}

/*blocco destro*/
#block{
background: url(image/blocklog.jpg) repeat-y;
width:150px;
float:right;
padding: 0px;
height:100%;
}

/*blocco interno al blocco destro*/
.box{
background:#CCCCCC url(image/block.jpg) repeat-y;
margin:4px;
border:1px solid black;
font: 10px/10px Arial,sans-serif;
}


.boxint{
margin:2px 0px 2px 4px;
font: 10px/10px Arial,sans-serif;
}

/*titolo*/
.tit{
background-color:#CC9999;
font: bold 11px Arial,sans-serif;
color:white;
}

/*footer*/
#footer{
clear:left;
text-align:center;
background-color:#666666;
font: bold 11px Arial,sans-serif;
color:white;
}


/*ulteriore blocco interno*/
#descint{
margin:10px;
background-color:#CCCCCC;
font: 12px/12px Arial,sans-serif;
border:2px solid white;
}



/*blocco interno posizionato a destra con un float*/
#info{
background: url(image/blocklog.jpg) repeat-y;
float:left;
margin:3px;
border:2px solid white;
width:170px;
}