Div Quebrando - Se movendo!

[Eric Vinícius 0]

Pessoal, primeiramente bom dia.

 

O problema que vou apresentar aqui, é de longe, a minha maior dificuldade no desenvolvimento com XHTML e CSS.

 

Evolui muito seguindo as dicas de estudo dos amigos aqui... Mas, esse problema, tecnicamente nunca consegui entender.

 

Quando diminuo o tamanho da janela do navegador, a DIV branca, dança na tela.

 

Não sei se existe um motivo para tal comportamento do elemento, honestamente. Agradeço muito a ajuda.

 

Segue meu código abaixo.

 

Segue também o link do site.

 

HTML

<div id="tudo">
  <div id="topo-geral">
   <div id="topo-centro">

       <ul id="icons_top">
           <li>
               <a id="l1" href="#">
                   <img id="ico_top_1" alt="" src="<?php echo url::base(FALSE)?>imagens/ico_1.png" width="15px" height="15px"/>
               </a>
           </li>
           <li>
               <a id="l2" href="#">
                   <img id="ico_top_2" alt="" src="<?php echo url::base(FALSE)?>imagens/ico_2.png" width="15px" height="15px"/>
               </a>
           </li>
           <li>
               <a id="l3" href="#">
                   <img id="ico_top_3" alt="" src="<?php echo url::base(FALSE)?>imagens/ico_3.png" width="15px" height="15px"/>
               </a>
           </li>
       </ul>

       <img class="somb_left_top" src="<?php echo url::base(false)?>imagens/somb_left_top.png" alt="" width="23px" height="181px"/>
       <a href="http://www.okcartoes.com/temp" title="Ok Cartões">
           <img class="logo" alt="logo-ok" src="<?php echo url::base(false)?>imagens/logo.jpg" width="181px" height="181px"/>
       </a>

       <div id="slider">

       </div>

       <img class="somb_right_top" src="<?php echo url::base(false)?>imagens/somb_right_top.png" alt="" width="23px" height="181px"/>

   </div>
   <div id="centro-geral">
   <div id="centro-meio">

   </div>
   </div>
 </div>            
</div>

CSS

#tudo{
   min-height:100%;
   width:100%;
   background: url("../imagens/bg.jpg") repeat-x scroll 0 0 #1E2248;    

}

#topo-geral{    
   height: 235px;    
   width: 100%;
   background: transparent;
}

#topo-centro{
   background-color: white;
   height: 235px;
   margin: 0 auto;
   width: 950px;
/*    border: 1px solid black;*/

}
.logo{
   float: left;
   margin: 56px -210px;
}
.somb_left_top{
   float: left;
   margin: 56px -233px;
}
.somb_right_top{
   float: right;
   margin: -180px 0;
}
#icons_top{
   list-style: none;
   float: left;
   margin: 30px 82px;

}
#icons_top li{
   display: inline;
   padding-right: 5px;
}
#icons_top li a{
   text-decoration: none;
}
#slider{
   width: 726px;
   height: 235px;
   background: red;
   background: url("../imagens/featured_1.png") repeat-x scroll 0 0 transparent;
   margin-left: 200px;

}
#centro-geral{
   width: 100%;
   min-height: 900px;    
}
#centro-meio{    
   width: 743px;
   background-color: white;    
   margin: 0 0 0 404px;
   height: 900px;

}

Estou usando o CSS do E. Meyer

 

Link para site:Resultado

[Alex Pessoa 0]

Cara ainda não entendi o que você quer fazer mas seja lá o que for e pelo que acredito que você está pensando, deve ser porque a div topo ela tem a propriedade margin com valor 0 auto e isso faz ela ficar centralizada mas o background não, ele está alinhado à esquerda.

[Eric Vinícius 0]

Opa Alex, belê?

 

Seguinte: você deu uma olhada no link que mandei?

 

Se você acessar a página e restaurar o tamanho da janela, verá o bug.

 

Eu usei

body{overflow-x:hidden;}

para "resolver". Creio que isso seja mais uma gambiarra mesmo.

 

Gostaria de saber como solucionar esse problema.. sigo pesquisando aqui.

 

Valeu!

[Guilherme Müller 0]

Se você quer a div branca no meio, basta:

#centro-meio {
 margin: 0 auto;
}

 

Também sugiro que troque o nome para algo que descreva a função do elemento, não sua apresentação. #conteudo é melhor do que #centro-meio.