<html>
<head>
<title>Stitolato</title>
<style type="text/css">
body {font-family:sans-serif;
font-size:90%;
}
.destra p {padding:4px;
text-align:center;
color:white;
margin:0
}
.sinistra p {padding:4px;
margin:0;
color:black;
text-align:left
}
.contenitore {width:400px;
border-left:1px solid black;
border-right:1px solid black;
border-bottom:1px solid black;
background:green;
}
.sinistra {
width:50%;
background:silver;
border-top:1px solid red;
border-left:1px solid red;
border-right:1px solid black;
float:left;
}
.destra
{
width:100%;

border-top:1px solid black;
padding:0
}
.clear {clear:both;
height:0px;
font-size:0px;
line-height:0px;
}
</style>
</head>
<body>
<div class="contenitore">

<div class="destra"><div class="sinistra">

Allineato a SX vediamo che succede</p></div>

Allineato al centro</p></div>
<br class="clear">
<div class="destra"><div class="sinistra">

Allineato a SX</p></div>

Allineato al centro</p></div>
<br class="clear">
</div>


</body>
</html>


Fai attenzione, data la natura dei div non è possibile senza immagini di sfondo tenere dipendenti le pseudo-colonne, solo una per pseudo-riga riesce a trascinare in altezza le altre, almeno fino a quando la la lunghezza di una parola non eccede lo spazio della pseudo-cella, in questo caso è quella di sinistra, se fosse maggiore il testo dell'altra per almeno un linea di testo sballerebbe, puoi provarlo con mozilla ridimensionando il testo e vedere che la prima riga rispetta questa condizione e la prima pseudo cella trascina la seconda, la seconda riga no, se ti serve un'impostazione diversa lo dici.