[Resolvido] Problema no alinhamento de DIVs

estou com um problema na hr de programar 3 areas de um layout que estou criando.

http://i41.tinypic.com/211ue1h.png

os sidebars estao ficando lado a lado, ao invés de ficar um abaixo do outro.

eis que o alinhamento certo é esse -> http://i40.tinypic.com/20qdrf4.jpg

CSS

/CORPO/
#side_esq{ float:left; display:inline; width:226px; background:#090;}
#conteudo{ float:left; display:inline; width:526px; height:300px; background:#933;}
#side_dir{ float:right; display:inline; width:226px; background:#09C;}

/SIDEBAR/
.widgets-box{width:225px; background:url(images/repeat-side.jpg) repeat-y center top; overflow:hidden; margin:20px 0 0 0;}
.titulo_side{ background:url(images/titulo-side.jpg) no-repeat left top; width:226px; height:72px; margin:20px 0 0 0;}
.titulo_side h3{ color:#FFF; font-size:20px; padding:25px 0 0 20px; text-shadow:1px 1px #000;}
.repeat-side{ background:url(images/repeat-side.jpg) repeat-y center top; width:225px; float:left; margin:0 0 0 1px;}
.rodape-side{ background:url(images/fim-side.jpg) no-repeat left top; width:225px; height:45px; float:left; margin:0 0 0 1px;}

/POSTAGEM/
.cima-post{ background:url(images/cima-post.jpg) no-repeat center; width:527px; height:92px;}
.cima-post h1{ color:#FFF; font-size:20px; float:left; margin:20px 0 0 30px;}
.cima-post h1 a:hover{ text-decoration:underline;}
.repeat-post{ background:url(images/repeat-post.jpg) repeat-y center; width:525px; float:left; margin-left:1px; height:auto;}
.repeat-post .txt-post{ width:500px; margin:0 10px;}
.repeat-post .txt-post img{ box-shadow:1px 1px 1px 1px #CCC; margin-bottom:5px;}
.repeat-post .txt-post a{ color:#06C; text-decoration:underline;}
.repeat-post .txt-post a:hover{ color:#F90; text-decoration:none;}

HTML

<!-- SIDEBAR ESQUERDA -->

 <div id="side_esq">

 <div class="titulo_side"><h3>Sidebar Esquerda</h3></div>
 <div class="repeat-side">dksadçalks</div>
 <div class="rodape-side"></div>

 </div><!-- fim div side_esq -->

 <div id="side_esq">

 <div class="titulo_side"><h3>Sidebar Esquerda 2</h3></div>
 <div class="repeat-side">dksadçalks</div>
 <div class="rodape-side"></div>

 </div><!-- fim div side_esq -->

 <div id="conteudo">

 </div><!-- fim div conteudo -->
 <div id="side_dir">

 <div class="titulo_side"><h3>Sidebar Direita</h3></div>
 <div class="repeat-side">dksadçalks</div>
 <div class="rodape-side"></div>

 </div><!-- fim div side_dir -->

 <div id="side_dir">

 <div class="titulo_side"><h3>Sidebar Direita 2</h3></div>
 <div class="repeat-side">dksadçalks</div>
 <div class="rodape-side"></div>

 </div><!-- fim div side_dir -->