Problema com FLOAT

A altura tem que ser automatica, mas não posso flotar o #content pois ele tem que ficar centralizado como está, o que acontece é que a #internas tem de extender o height conforme o conteúdo que recebe e isto não está acontecendo

HTML

<div id="content">
 <div id="internas">
 <span class="page_titu">Empresa</span>

 <div class="left">
 conteudo esquerda
 </div><!-- //LEFT -->

 <div class="right">
 conteudo direita
 </div><!-- //RIGHT -->
 </div><!--//INTERNAS-->
</div><!--FIM CONTENT-->

CSS

#content{
margin:0 auto;
padding:10px 0;
width:960px;
background:#fff;
}

#internas{
margin:10px auto 0;
width:950px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}

.left{
float:left;
margin:5px 0 5px 5px;
display:block;
width:640px;
}

.right{
float:right;
margin:5px 5px 5px 0;
display:block;
width:280px;
}

>
A altura tem que ser automatica, mas não posso flotar o #content pois ele tem que ficar centralizado como está, o que acontece é que a #internas tem de extender o height conforme o conteúdo que recebe e isto não está acontecendo

se eu colocar um height:500px por exemplo em #internas funciona, mas eu não posso por que ter de ser height automatico, já tentei height:auto; mas nem funcionou

HTML

<div id="content">
 <div id="internas">
 <span class="page_titu">Empresa</span>

 <div class="left">
 conteudo esquerda
 </div><!-- //LEFT -->

 <div class="right">
 conteudo direita
 </div><!-- //RIGHT -->
 </div><!--//INTERNAS-->
</div><!--FIM CONTENT-->

CSS

#content{
margin:0 auto;
padding:10px 0;
width:960px;
background:#fff;
}

#internas{
margin:10px auto 0;
width:950px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}

.left{
float:left;
margin:5px 0 5px 5px;
display:block;
width:640px;
}

.right{
float:right;
margin:5px 5px 5px 0;
display:block;
width:280px;
}

Desculpem foi burrada minha

esqueci do

<div id="clear"></div><!-- //CORREÇÃO -->

 

#clear{

 clear:both;

}

antes do fechamento da #internas

Obrigado, e desculpem