Salve, stò cercando di fare un po' di pratica con i CSS così da riuscire a fare siti senza tabelle, ma solo con tag div. Vorrei creare un layout centrato con due colonne conteneti testo, e nel farlo ho provato ad impiegare questo codice:

codice:
<div class="principale">
 <div class="sinistra">

testo di prova</p></div>
 <div class="destra">

altro testo di prova</p></div>
</div>

.principale {
	height: 400px;
	width: 400px;
	margin-right: auto;
	margin-left: auto;
}
.sinistra {
	height: 400px;
	width: 200px;
	position: relative;
}
.destra {
	height: 400px;
	width: 200px;
	position: relative;
	left: 200px;
}
Purtropo però ogni volta che aggiungo una riga nella colonna di sinistra, il div della colonna di destra scende a sua volta. Sono certa si tratti di un problema banale e legato al posizionamento, ma non riesco proprio a capire dove ho sbagliato.

Sapreste consigliarmi?