Centralizar uma div maior dentro de outra menor

Seguinte pessoal.

Tenho uma div que #engloba 3 divs cada uma com uma largura de 1100px.

Eu preciso que elas centralizem em 960px quando a resolução por ventura for menor que 1100px.

#engloba
{

 margin: 0 auto;
}

3 divs englobadas

#topo {
 background: url(../img/topo.png) no-repeat;
 width: 957px;
 height: 134px;
 margin: -50px auto 0;
 margin-bottom: -100px;
 position: relative;
 padding: 58px 70px 0 74px;
 z-index: 10;
}
#centro {
 background: #E08226;
 width: 980px;
 margin: 0 auto;
 display: none; /***** é um slider que abre quando clica num botão *****/
}

#footer{
 background: url(../img/footer.png) no-repeat center center;
 width: 1100px;
 height: 66px;
 margin: 0 auto;
 float: left;
}

Abaixo segue uma imagem que fiz tentando explicar.

/applications/core/interface/imageproxy/imageproxy.php?img=https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-prn1/534419_2817114114807_1467507976_32059953_554233822_n.jpg&key=8e6799c3a93ee4bfe49fcadbe56f01a20a9a868be47129073b0fbcc45776ecac" alt="534419_2817114114807_1467507976_32059953_554233822_n.jpg" />