Foros del Web » Creando para Internet » CSS »

Problema centrando div

Estas en el tema de Problema centrando div en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 19/10/2010, 16:24
 
Fecha de Ingreso: junio-2009
Mensajes: 79
Antigüedad: 8 años, 5 meses
Puntos: 0
Pregunta Problema centrando div

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:
Ver original
  1. <div id="container">
  2.     <div id="sidebar">
  3.         texto
  4.     </div>
  5.     </div id="content">
  6.         texto
  7.     </div>
  8. </div>

Código CSS:
Ver original
  1. #container{
  2.     margin: 0 auto;
  3.     width: 900px;
  4. }
  5.  
  6. #sidebar{
  7.     float: left;
  8.     width: 300px;
  9. }
  10.  
  11. #content{
  12.     float: left;
  13.     width: 600px;
  14. }

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.
  #2 (permalink)  
Antiguo 19/10/2010, 18:15
Avatar de Shaito  
Fecha de Ingreso: agosto-2010
Mensajes: 383
Antigüedad: 7 años, 4 meses
Puntos: 37
Respuesta: Problema centrando div

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
  #3 (permalink)  
Antiguo 19/10/2010, 19:01
 
Fecha de Ingreso: junio-2009
Mensajes: 79
Antigüedad: 8 años, 5 meses
Puntos: 0
Respuesta: Problema centrando div

Hola amigo,

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

Código HTML:
Ver original
  1. <div id="container">
  2.           <div id="sidebar">
  3.               texto
  4.           </div>
  5.           </div id="content">
  6.               texto
  7.           </div>
  8.           <div id="sidebar2">
  9.               <!-- Vacio -->
  10.           </div>
  11.       </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
  #4 (permalink)  
Antiguo 20/10/2010, 02:03
 
Fecha de Ingreso: septiembre-2010
Ubicación: http://nomenrecordo.blogspot.com/
Mensajes: 111
Antigüedad: 7 años, 2 meses
Puntos: 1
Respuesta: Problema centrando div

también puedes una cosa anti-css (xD): usar la etiqueta <center>
  #5 (permalink)  
Antiguo 20/10/2010, 02:10
Avatar de Shaito  
Fecha de Ingreso: agosto-2010
Mensajes: 383
Antigüedad: 7 años, 4 meses
Puntos: 37
Respuesta: Problema centrando div

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

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

Pasanos tu direccion de la web
  #6 (permalink)  
Antiguo 21/10/2010, 12:51
 
Fecha de Ingreso: octubre-2010
Mensajes: 66
Antigüedad: 7 años, 2 meses
Puntos: 7
Respuesta: Problema centrando div

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:
Ver original
  1. <div id="wrapper">
  2.     <div id="sidebar">asd</div>
  3.     <div id="content">asdasd</div>
  4. </div>

Código CSS:
Ver original
  1. #wrapper{
  2.         width: 880px;
  3.         height: 600px;
  4.         background: #f00;      
  5.  
  6.         position: absolute;             /* estas son las que tienes que añadir */
  7.         left: 50%;              /* estas son las que tienes que añadir */
  8.         margin-left: -505px;        /* estas son las que tienes que añadir, y jugar con este margen */
  9.  
  10.     }
  11.     #sidebar{
  12.         background: #c00;
  13.         width: 165px;
  14.         float: left;
  15.         height: 200px;
  16.     }
  17.     #content{
  18.         background: #00c;
  19.         height: 200px;
  20.         float: right;
  21.         width: 710px;
  22.         height: 600px;
  23.     }
  #7 (permalink)  
Antiguo 22/10/2010, 05:13
 
Fecha de Ingreso: octubre-2010
Mensajes: 66
Antigüedad: 7 años, 2 meses
Puntos: 7
Respuesta: Problema centrando div

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

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

Etiquetas: center, margin, posicion
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 12:13.