Problema centrando div

[bengiss]

Hola a todos,

Tengo un problema para centrar un div horizontalmente en mi pagina ya que estoy trabajando con un layout bastante peculiar y no me deja utilizar margin: auto. Aqui les muestro basicamente como seria el codigo:

Código HTML:

<div id="container">
    <div id="sidebar">
        texto
    </div>
    </div id="content">
        texto
    </div>
</div>
 

Código CSS:

#container{
    margin: 0 auto;
    width: 900px;
}
 
#sidebar{
    float: left;
    width: 300px;
}
 
#content{
    float: left;
    width: 600px;
}
 

Como ven de esa manera me centra perfectamente el div container pero lo que necesito es que se centre el div "content" horizontalmente, hice esta imagen para ayudar a explicarme mejor: http://dirtymind.jvsoftware.com/img/csserror.png

Hay alguna manera de hacer esto? Muchas gracias de antemano.

[Shaito]

Hola!

La posible solución para ello, es que la medida del div sea la misma que el #container así, se quedará centrada.

Y que dentro de él, tengas un div llamado #head, así te será más fácil controlar las posiciones

De todos modos, deja la dirección de la web para que podamos ayudarte mejor

[bengiss]

Hola amigo,

No comprendo exactamente, me podrias explicar mejor? Ahora lo que hice para "arreglarlo" fue esto:

Código HTML:

<div id="container">
          <div id="sidebar">
              texto
          </div>
          </div id="content">
              texto
          </div>
          <div id="sidebar2">
              <!-- Vacio -->
          </div>
      </div>
 

El sidebar2 es del mismo ancho que el "sidebar" de esta manera le agrego espacio y se ve el efecto centrado, aunque no se si sera la mejor solucion.

Saludos

[PHPau]

también puedes una cosa anti-css (xD): usar la etiqueta <center>

[Shaito]

NO!!!!!!!!!!!!!

Por dios eso no... es peor que usar el internet explorer!

Pasanos tu direccion de la web

[hdennison]

Si sabes el ancho de los divs (que entiendo que si) puedes hacer esto:

position: absolute;
left: 50%;
margin-left: -440px; // este número es la mitad del ancho de tu contenedor principal.

Asi estarías en la misma situación de antes (todo centrado) pero puedes jugar con el margen negativo hasta que lo centres como quieras (aprox 520px según mis pruebas)

OJO: No creo que lo hagas funcionar con resoluciones inferiores a 1024x768!


Mis pruebas:

Código HTML:

<div id="wrapper">
    <div id="sidebar">asd</div>
    <div id="content">asdasd</div>
</div>
 

Código CSS:

#wrapper{
        width: 880px;
        height: 600px;
        background: #f00;       
 
        position: absolute;             /* estas son las que tienes que añadir */
        left: 50%;              /* estas son las que tienes que añadir */
        margin-left: -505px;        /* estas son las que tienes que añadir, y jugar con este margen */
 
    }
    #sidebar{
        background: #c00;
        width: 165px;
        float: left;
        height: 200px;
    }
    #content{
        background: #00c;
        height: 200px;
        float: right;
        width: 710px;
        height: 600px;
    }
 

[hdennison]

Otra opción que he encontrado hoy y que puede evitar el problema de resoluciones:

http://playground.deaxon.com/css/float-centering/