Ovvero: come complicare una cosa semplice.
Ovvero: come studiare un modo per rendere necessario un CSS per ogni browser.

Un position: absolute; in molti browser fa togliere l'oggetto dal normale flusso. Quindi e` come se il contenitore non ci fosse.
Per affiancare due blocchi, basta usare il float. Ecoc il CSS che userei io, per il tuo HTML:
codice:
html, body {
  width: 100%;
  font-size: 100%;
  margin:0;
  padding:0;
}
.principale {
  width:527px; /* oppure 100% */
  background:#333;
  float: left;
}
.primoriquadro {
  width:258px; /* oppure 50% */
  background:#F0F;
  float: left;
}
.secondoriquadro {
  width:258px; /* oppure 49% */
  background:#F00;
  flaot: left; /* oppure right */
}
Potrebbe essere utile annullare margini, bordi e padding anche nei vari blocchi interni.