Background com duas imagens de fundo

[Escolha Certa]

Olá amigos,

Sou novo por aqui e também sou novo no mundo da programação. Estou desenvolvendo um site em HTML/CSS e estou com um dúvida que esta tirando meu sono.

Criei esse layout: http://www.escolhac.com.br/cdr .

Agora estou diagramando ele, mas na motagem das imagens de fundo tive muitas dúvidas e não sei se fiz corretamente. Estou enviando o link do conteudo já programado.

http://www.escolhac.com.br/clube

Alguém pode me dizer se estou no caminho certo?

[Escolha Certa]

Olá boa tarde,

Alguém pode me dizer isso acontece?

http://www.escolhac.com.br/clube/

Não consigo fazer o conteundo ir para direita ou esquerda. Ele sempre vai para baixo.

Tenho que fazer o site ficar assim: Layout

Alguém me ajude por favor.

body{ font:normal 13px 'Droid Sans'; color:#615a5a; background:#000000; margin:0 auto; padding:0;}
#body{ background:url(../Imagens/filete_fundo_geral_meio.jpg) center top; width:100%;}
#topo{ background:#0F9; width:100%; height:215px; background-image:url(../Imagens/fundo_topo.jpg);}
#rodape{ background:url(../Imagens/filete_botton.jpg) center top; height:130px; margin-top:20px; padding-top:85px;}

#rede {
    width:981px;
    height:24px;
    margin:auto;
}

#rede a {
    float:right;
    padding-right:11px;
    margin-top:9px;
}

#geral {
    background:url(../Imagens/filete_conteudo.jpg) center top repeat-y;
    margin-left:-23px;
    margin-top:-175px;
    z-index:2;
}


#conteudo {
    width:981px;
    margin:auto;
    padding-top:25px;

}

#topoconteudo {
    width:981px;
    height:93px;
    margin-top:-5px;
}

#logo a  {
    width:303px;
    height:84px;
    margin:0;
    padding:0;
    float:left;
}
    
#telefone {
    width:260px;
    height:17px;
    float:right;
    margin:0;
    padding:0;
    margin-top:-15px;
}

#telefone p {
    font-family:Calibri;
    font-size:19px;
    color:#852a02;
    font-weight:bold;
    text-align:right;
}

#menu {
    width:651px;
    height:38px;
    float:right;
    background:url(../Imagens/barra_menu.jpg) no-repeat bottom right;
    margin-top:53px;
    margin-right:1px;
}

#menu ul {
    margin:0;
    padding:0;
    float:right;
    margin-right:10px;
}

#menu ul li {
    margin:0;
    padding:0;
    list-style:none;
    display:inline-block;
}

#menu ul li a {
    float:right;
    display:block;
    color:#0a0a0a;
    font-size:17px;
    text-decoration:none;
    font-family:Calibri;
    padding:8px 7px 10px 15px;
}

#menu ul li a:hover{
    text-decoration:none;
    color:#004a69;
}


#slides {width:980px; 
         height:329px; 
         margin:0 auto; 
         overflow:hidden;
}

#conteudohome {    
    width:981px;
    height:100%;
    margin:auto;
    background-color:#FFF;
    margin-top:11px;
}

#destaque{    
    width:950px;
    background:#0F3;
    margin-right:50px;
    padding-left:10px;
    padding-top:24px;
    
}

#destaque img{    
    padding-left:5px;

}

#box1 {
    width:310px;
    height:189;
    background:url(../Imagens/box_fundo_o_clube_do_rastreador.png) no-repeat;
    margin:0;
    padding:0;
    padding-left:-10px;
}

#box1 p {
    width:271px;
    height:151;
    overflow:hidden;
    padding-top:15px;
    padding-left:18px;
    text-align:justify;
    
}


#barra {
    width:1px;
    height:50px;
    background:#666 left;

}