Layout em CSS, problema com DIVs

[Jean Felipe ! 0]

Olá! Bem-vindos ao meu tópico (lê-se mundinho de problemas), não estou conseguindo organizar as divs do layout de um modo que elas fiquem corretas. Eu gostaria que a div do meio, ficasse alinhada com a div maior ao seu lado, enquanto a div da extrema direita pudesse descer até o final sem quebrar o resto do design. Se precisar que eu especifique melhor, é só avisar Confiram a imagem, e em seguida os códigos do CSS:

 

 

 

O código do CSS:

#container {
width: 980px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
#topo {
height: 200px;
}
#barra {
background-color: #000;
height: 30px;
}
#rota {
background-color: #96C;
height: 270px;
width: 740px;
margin-bottom: 20px;
float: left;
}

#navbar {
height: 24px;
}
#auxiliar2 {
float: right;
height: 500px;
width: 220px;
margin-left: 20px;
clear: inherit;
}

#conteudo {
float: left;
width: 500px;
}
#a-conteudo {
height: 50px;
}
#b-conteudo {
height: 500px;
background-image: url(layout/fundo.png);
background-repeat: repeat;
}
#auxiliarmeio {
height: 500px;
width: 220px;
float: left;
margin-right: 20px;
margin-left: 20px;
background-image: url(layout/fundo.png);
}


#rodape {
clear: both;
height: 30px;
background-image: url(layout/fundo.png);
background-repeat: repeat;
}

body {
font-family: Tahoma, Geneva, sans-serif;
background-color: #000;
margin: 0px;
padding: 0px;
background-attachment: fixed;
background-image: url(layout/bg_image.jpg);
background-repeat: no-repeat;
background-position: center;
}
p, h1, h2, h3, h4, h5, h6 , ul, ol{
margin: 0px;
padding: 0px;
}

#a-auxiliar2 {
height: 50px;
width: 220px;
float: right;
}
#b-auxiliar2 {
background-image: url(layout/fundo.png);
height: 500px;
width: 220px;
float: right;
}

 

Agradeço a ajuda do pessoal!!

[allex_carvalho 124]

Com um link fica mais fácil ver o problema. Mais, já tentou dar um clear:both na div que está quebrada?

Qualquer coisa posta um link do site hospedado para analisarmos.

[mateusguitar1 0]

Tenta o que o Allex Disse, da um clear:both

 

se alguém puder deem uma olhada no meu tópico :S

 

http://forum.imasters.com.br/topic/443579-tipo-de-site/page__p__1752060__fromsearch__1#entry1752060

 

agradeço desde já

[Jean Felipe ! 0]

Hospedei o site! Talvez seja alguma ordem errada nas Divs. http://www.epicplay.com.br/teste/

[crf_h0m3r 5]

A ordem das divs estão certas, o problema está nos margins que você tá atribuindo ao elemento.

Tenta tirar o margin-left: 20px; margin-right: 20px; e substitue por margin: 0 10px;. Depois é só ir ajustando o tamanho.

[Jean Felipe ! 0]

Eu não pensei nessa hipótese, eu tinha feito a medida exata de acordo com o esqueleto. Obrigado. =)

 

Tenho um novo problema. Ainda com as DIVs, eu precisava formar elas para o sistema de notícias também, mas não estou conseguindo alinhar corretamente as coisas, e ainda está me dando dor de cabeça isso. (não acho tutorial adequado para o que eu quero, só explicação simples) - Como podem ver na imagem abaixo, coloquei por cores cada div (ou pelo menos a idéia delas), a div preta que segura tudo teria 500 de largura até uma média de 140 de altura, dai tem o resto das divs que estão sendo indicadas cada uma com sua própria cor. A barra laranja no final seria aquelas divisórias que colocam a cada notícia.