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!!