Tema: Centrado no me funciona
Ver Mensaje Individual
  #1 (permalink)  
Antiguo 30/01/2015, 14:09
Avatar de Middrel
Middrel
 
Fecha de Ingreso: abril-2005
Mensajes: 835
Antigüedad: 19 años
Puntos: 27
Centrado no me funciona
Hola, buenas tardes,

Tengo un problema con un par de divs que quiero centrar a mi página, de manera horizontal, sin embargo no veo porque no me deja. Les explico como está mi código:

Tengo la siguiente estructura,

Código HTML:
<body>
    <div id="content">
        <header></header>
        <div id="wrapper">
            <div id="widget-upper">
                <div class="widget-left"></div>
                <div class="widget-right"></div>
            </div>
            <div id="widget-middle">
                <div class="widget-left"></div>
                <div class="widget-right"></div>
            </div>
        </div>
        <footer></footer>
    </div>
</body>
donde los estilos aplicados son los siguientes:

Código CSS: 
Ver original
  1. body{ 
  2.     background:url(../imagenes/background.jpg) repeat-y;
  3.     font-family:'Open Sans', sans-serif;
  4.     height:100%;
  5.     margin:0 auto; }
  6.  
  7. header{ 
  8.     background-color:#630005;
  9.     float:left; 
  10.     height:38px; 
  11.     min-width:1024px;
  12.     padding-top:5px; 
  13.     width:100%; }
  14.  
  15. footer{ 
  16.     background-color:#446db4; 
  17.     float:left; 
  18.     height:84px;
  19.     margin-top:92px; 
  20.     min-width:1024px; 
  21.     width:100%; }
  22.  
  23. #content{ float:left; height:auto; width:100%; }
  24.  
  25. #wrapper{
  26.     float:left;  
  27.     height:auto; 
  28.     width:100%; }
  29.  
  30. #wrapper:after{ height:108px; display:block; clear:both; }  
  31.  
  32. #widget-upper{ 
  33.     float:left;
  34.     height:auto;
  35.     margin:1% auto;
  36.     width:100%; }
  37.  
  38. #widget-middle{ 
  39.     float:left;
  40.     height:auto;
  41.     margin:0 auto;
  42.     width:1280px; }
  43.  
  44. .widget-left{
  45.     float:left;
  46.     padding:10px 0; 
  47.     text-align:left; 
  48.     width:400px; }
  49.  
  50. .widget-right{ 
  51.     float:left; 
  52.     margin-left:-1%;
  53.     padding:10px 0; 
  54.     text-align:right; 
  55.     width:871px; }

Bueno, el problema que tengo es sólo con los divs widget-upper y widget-middle, que no logro centrarlos a la página. Estos divs tienen un ancho fijo de 1280px. Ya utilicé varios métodos para centrarlos pero no se mueven de su posición inicial, margen izquierdo.

Si uso en mis estilos esto:

left:50%;
margin-left:-640px;
position:relative;

No me funciona debido a que en resoluciones menores se va quedando orientado a la derecha.

Aún no detecto cuál es mi error, podrían apoyarme con esto?

De antemano, les agradezco por su tiempo.

Saludos!!