Ciao ragazzi;

Ho un piccolo problema, guardate il sottostante codice:
codice:
<html>
<head>
<style type="text/css">
body{margin:0; padding:0;}
.principale{position:relative;width:527px; height:auto;left:0; top:0; background:#333333}
.primoriquadro{position:absolute; width:258px; height:auto; top:0; left:0; background:#FF00FF}
.secondoriquadro{position:absolute; width:258px; height:auto; left:0; top:0; margin-left:268px; background:#FF0000}
</style>
</head>
<body>

<div class="principale">
  <div class="primoriquadro">
  Questo è il primo riquadro
  </div>
  
  <div class="secondoriquadro">
  Questo è il secondo riquadro
  </div>
</div>

</body>
</html>
In pratica non riesco ad assegnare alla classe".principale" un altezza dinamica che cambi in
in proporzione all'altezza delle due classi"primoriquadro e secondoriquadro",
cioè se ad esempio la classe"primoriquadro" fosse alta "100px" la classe"principale"
non aumenta dinamicamente...
Come posso creare una condizione che mi permetta di fare quanto suddetto.

NB: ho usato le "position:absolute" per affiancare le due classi "primoriquadro e secondoriquadro", certo potevo
farlo anche con "position:relative mettendo la proprietà top:-200...", ma non posso farlo in quanto non conosco l'altezza delle due classi.

Grazie mille