Centrado no me funciona

Middrel · #1 (**permalink**) 30/01/2015, 14:09

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 originalbody{ 
    background:url(../imagenes/background.jpg) repeat-y;
    font-family:'Open Sans', sans-serif;
    height:100%;
    margin:0 auto; }
 
header{ 
    background-color:#630005;
    float:left; 
    height:38px; 
    min-width:1024px;
    padding-top:5px; 
    width:100%; }
 
footer{ 
    background-color:#446db4; 
    float:left; 
    height:84px;
    margin-top:92px; 
    min-width:1024px; 
    width:100%; }
 
#content{ float:left; height:auto; width:100%; }
 
#wrapper{
    float:left;  
    height:auto; 
    width:100%; }
 
#wrapper:after{ height:108px; display:block; clear:both; }  
 
#widget-upper{ 
    float:left;
    height:auto;
    margin:1% auto;
    width:100%; }
 
#widget-middle{ 
    float:left;
    height:auto;
    margin:0 auto;
    width:1280px; }
 
.widget-left{
    float:left;
    padding:10px 0; 
    text-align:left; 
    width:400px; }
 
.widget-right{ 
    float:left; 
    margin-left:-1%;
    padding:10px 0; 
    text-align:right; 
    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!!

GekoDH · #2 (**permalink**) 30/01/2015, 14:59

A mí con ese código el widget-upper me aparece centrado, porque ocupa el 100% del ancho.
El widget-middle a mí sólo se me ocurre no flotarlo a la izquierda y ponerle clear:both; para que se ponga debajo del widget-upper.

Código:

#widget-middle{ 

    height:20px;
    margin:0 auto;
    width:1280px; 
    background-color:green;
    clear: both;
    
}

Middrel · #3 (**permalink**) 02/02/2015, 16:19

¿Te aparece centrado el widget-upper? Es posible que algo dentro de ese o esos divs esté alterando su funcionamiento correcto?

Ya intenté con el clear:both, pero sigue igual :/

Saludos!! Gracias por responder!! ^^

GekoDH · #4 (**permalink**) 03/02/2015, 18:09

A mí se me ve así: http://jsfiddle.net/yj8zzy8z/1/

Como el upper tiene anchura 100% ocupa todo el ancho de la pantalla, por tanto no puede estar descentrado.

Con lo que te dije se vería así: http://jsfiddle.net/yj8zzy8z/2/