Ciao a tutti,

domino ancora molto poco i CSS di livello 2, ma sto cercando di perfezionarmi...

Mi è capitato, ad esempio, di voler distribuire all'interno di un box principale, altri 3 box di cui uno a sinistra e altri 2 a destra (uno sotto all'altro).
Se il box di sinistra è + alto della somma dei 2 box di destra va tutto bene e il layout resta impaginato; se però il box di sinistra è + basso del primo box di destra, succede che il secondo box di destra non rimane + allineato al primo.

Vi posto un codice di esempio così potete capire immediatamente il problema:

codice:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
#box_principale 
{  
background-color: #666666; 
padding-top: 5px; 
padding-right: 5px; 
padding-bottom: 5px; 
padding-left: 5px; 
height: 500px; 
width: 500px;
}

#box_sinistro 
{  
background-color: Snow; 
float: left; 
height: 200px; 
width: 300px;
}

#box_destro_alto 
{  
background-color: PeachPuff; 
float: right; 
height: 250px; 
width: 150px;
}

#box_destro_basso
{  
background-color: LightBlue; 
float: right; 
height: 100px; 
width: 150px;
margin-top: 5px;
}

-->
</style>
</head>

<body>
<div id="box_principale">
   <div id="box_sinistro">sinistra</div>
   <div id="box_destro_alto">destra in alto</div>
   <div id="box_destro_basso">destra in basso</div>
</div>
</body>
</html>
Quale proprietà manca negli stili per forzare comunque il terzo box sulla destra?

Grazie.