problema con centrado de div

yrduk · #1 (**permalink**) 17/06/2008, 16:10

Hola a todos, ando pausado totalmente con este lío que tengo :s.. les muestro el código:

Código:

.versus { 
background: #FFF;
width: 30%;
font-size: 45px;
text-align: center;
margin: auto;
position: relative;
}

y el HTML:

Código HTML:

<div class="versus">
<div style="width: 612px; position: relative; text-align: center">
aqui el contenido...
</div></div>

En IE sale bien, pero en firefox hay un espacio mayor entre el div izquierdo y el central, que con el derecho.. debería de tener el mismo espacio entre el div izquierdo y el div derecho, ya que según, está centrado.

Aquí les dejo el html y el css del div izquierdo y derecho respectivamente:

Div izquierdo

Código:

.box_register {
width: 250px;
float: left;
position: relative;
margin-top: 16px;
margin-left: 12px;
border:2px solid #FADDA9;
background-color:#FDF4E1;
}

Código PHP:

  <div class="box_register">contenido aqui

&nbsp;</div>

Div derecho:

Código:

.box_ads {
width: 160px;
height: 300px;
float: right;
position: relative;
margin-right: 10px;
border:2px solid #FADDA9;
background-color:#FDF4E1;
}

Código PHP:

  <div class="box_ads">contenido</div>

Y todo el código html está así:

Código HTML:

<div class="box_register">div izquierdo</div>
<br>
<div class="box_ads">div derecho</div>

	<div class="versus">
<div style="width: 612px; position: relative; text-align: center">contenido "central"  (no totalmente :S)</div>

</div>

Espero que me puedan ayudar

Saludos!

Mikmoro · #2 (**permalink**) 17/06/2008, 16:19

Añade esto a tu selector .versus, y verás lo que ocurre:

border: solid #f00;

Mikel.

yrduk · #3 (**permalink**) 17/06/2008, 16:23

Hola Mikmoro, gracias por tu respuesta, veo que la tabla del versus es mayor que el div versus...

Mikmoro · #4 (**permalink**) 17/06/2008, 16:29

Y sobre todo, que en FF la caja versus sí que está centrada en la página, pero su contenido sale fuera, mientras que en IE es más ancha y se salta a la línea siguiente de la caja de la izquierda (al menos en 1024).

Mikel.

yrduk · #5 (**permalink**) 17/06/2008, 16:46

Gracias por tu ayuda Mikmoro, pero terminé usando una tabla, y adentro de unas celdas metí los divs, así no me hago rollos...

Saludos!

Mikmoro · #6 (**permalink**) 17/06/2008, 16:50

No sé si lo que estás buscando es algo así. Por si acaso te lo pongo:

Cita:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
html, body {
width: 100%;
}
.box_ads {
width: 160px;
height: 300px;
float: right;
position: relative;
margin-right: 10px;
border:2px solid #FADDA9;
background-color:#FDF4E1;
}
.box_register {
width: 250px;
float: left;
position: relative;
margin-top: 16px;
margin-left: 12px;
border:2px solid #FADDA9;
background-color:#FDF4E1;
}
.versus {
background: #FFF;
font-size: 45px;
text-align: center;
margin: auto;
position: relative;
margin: 0px 180px 0px 270px;
border: solid 1px #f00;
}
</style>
</head>
<body>
<div class="box_ads">div derecho</div>
<div class="box_register">div izquierdo</div>
<div class="versus">contenido "central" (no totalmente :S)</div>
</body>
</html>

Copia y pega y pruébalo.

Te dejo el borde del central para que lo veas.

Mikel.

yrduk · #7 (**permalink**) 17/06/2008, 16:53

Cita:

Iniciado por Mikmoro

No sé si lo que estás buscando es algo así. Por si acaso te lo pongo:

Copia y pega y pruébalo.

Te dejo el borde del central para que lo veas.

Mikel.

Si, es algo asi, pero lo terminé haciendo con tablas, y ha funcionado :)

Gracias de todas maneras! Saludos.

Mikmoro · #8 (**permalink**) 17/06/2008, 16:55

Bueno, pues lo siento.