Div affiancati si sfasano quando inserisco del contenuto

[trez]

Ciao a tutti,
ho la seguente struttura HTML:

<div class="content">
            		<div id="body-content-left">
                    	<div id="box">
                        	<div id="box-head"></div>
                            <div id="box-content">
                                <p class="index-title">Prova titolo 1</p>
                            	<p class="index-p">Con questo contenuto bello finamico. Tzè!</p>
                                > Continua
                                        
                            </div>
                        </div>
                    </div>
                	<div id="body-content-right"></div>
           		</div>

Con il relativo CSS:

.content{
	min-width:900px;
	
	width:80%;
	padding:0;
	margin-left:auto;
	margin-right:auto;
	background-color:#F93;
	}

#body-content-left{
	display:inline-block; 
	background-color:#0C3; 
	width:30%; 
	min-width:270px;
	height:420px; 
	padding:0; 
	margin:0;
	}
	
#body-content-right{
	display:inline-block; 
	background-color:#F00; 
	width:69%; 
	height:420px; 
	padding:0; 
	margin:0;
	}

#box{
	background-color:#03C;
	width:226px;
	height:300px;
	margin-left:auto;
	margin-right:auto;
	margin-top:20px;
	padding:0;
	}

#box-head{
	height:30px;
	width:100%;
	background-color:#0058a3;
	border:1px solid #0058a3;
	padding:0;
	}

	
#box-content{
	height:100%;
	width:226px;
	background-color:#e8ebf2;
	border:1px solid #e8e8e8;
	padding-top:13px;
	}

.index-title{ font-size:13px; color:#0058a3; margin:0; padding:0; margin-left:42px;  margin-right:33px;}
.index-p{ font-size:12px; margin:0; padding:0; margin-left:51px; margin-right:33px;}
.index-a{ margin-left:113px; color:#3c82c0; font-size:12px;}

Come vedete, principalmente ho due div affiancati tramite display:inline-block.
Prima di inserire i paragrafi dentro a #box-content, che si trova nel div di sinistra (#body-content-left), i due div erano affiancati perfettamente, mentre ora, da quando ho inserito i paragrafi in "box-content", il blocco di sinistra si è alzato parecchio rispetto quello a destra, sfasando così il loro affiancamento.
Come mai?

Thaaanks

[trez]

Ho provato a stringere uno dei due div per vedere se era un problema di spazio ma nulla cambia

[Prill]

Non dovrebbe succedere in effetti dato che hai fissato l'altezza per tutti e due i div, ma in pratica avviene qualcosa di strano, se uno ha più contenuti degli altri appaiono sfalsati (e questo sarebbe normale in assenza di un'altezza specificata) producendo un allungamento del contenitore (e questo è inaspettato). Soluzione: aggiungi un vertical-align:top su tutti e due