[Resolvido] Float e layout líquido, o DIV pula para baixo se a re

Oi pessoal,

Estou desenvolvendo um site com layout líquido (alguns também conhecem como elástico ou ajustável), nele tenho um DIV principal que chamei de #container, dentro dele tenho outro DIV chamado #topo e este último contém dois DIVs, um chamado #topo_esquerda e outro chamado #topo_direita, o primeiro flutua para a esquerda e o segundo flutua para a direita. Abaixo segue a estrutura:

<div id="container">

 <div id="topo">

 <div id="topo_esquerda">
 </div>

 <div id="topo_direita">
 </div>

 </div>

</div>

Segue também o CSS associado a essa estrutura:

#container {
 width: 99.9%;
	position:relative;
	height:148px;
}

 #topo{
 width:100%;
 height:148px;
 position:relative;
 background-color:#FFC;
 }

 #topo_esquerda
 {
 width:537px;
 height:148px;
 position:relative;
 float:left;
 border:solid 1px #06F;
 }

 #topo_direita
 {
 width:416px;
 height:148px;
 float:right;
 border:solid 1px #0C0;
 }

O problema está no seguinte, se a resolução do monitor couber os dois DIVs (#topo_esquerda e #topo_direita), eles ficam bonitinhos, um do lado esquerdo e o outro do lado direito, mas se o monitor não couber os dois DIVs ou se eu for reduzindo a janela do navegador, a DIV #topo_direita vai para baixo da DIV #topo_esquerda, mas o que eu preciso é que elas continuem uma do lado da outra e apareça a barra de rolagem horizontal.

Alguém pode me dar uma força sobre como fazer isso?