[Resolvido] Problema no alinhamento de DIVs

[Rai Siqueira 3]

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 -->

[allex_carvalho 124]

Duas coisas:

 

#side_esq{ float:left; display:inline; width:226px; background:#090;}

 

Retira o display:inline;

 

<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>

 

Não duplique ID, id é único, se for usar dados repetidos use class, você duplicou o side_esq, coloquei 1 e 2 no final, tipo: side_esq1 e side_esq2

[Rai Siqueira 3]

vlw amigo, deu certo agora!