Cuestion de divs

dandarway · #1 (**permalink**) 07/06/2010, 11:06

Hola!

Tengo el siguiente problema...
Dispongo de un div con un tamaño fijado y quiero alinear horizontalmente otro par de divs internos a el, de modo que los 2 divs que estan dentro esten uno junto al otro.

He probado de mil maneras y solo consigo, bien juntar los dos divs internos sin poder alinear horizontalmente, o bien alinear horizontalmente uno de los divs mientras que el otro se va a la siguiente linea. Ambos casos no me valen, alguien podria arrojar algo de luz?

Un saludo y gracias!

gVenom · #2 (**permalink**) 07/06/2010, 11:15

Hola

Eso se hace con el parametro de "float" de css. Pero para ayudarte mejor sería bueno que pegues la parte del código que estas utilizando en esos div

dandarway · #3 (**permalink**) 07/06/2010, 11:30

Gracias por tu respuesta gVenom...

Cita:

Iniciado por gVenom

Eso se hace con el parametro de "float" de css.

Para colocar los dos divs internos uno junto al otro, utilizo "float:left;" y no presenta ningun problema. Pero otra cosa es cuando quiero alinear los 2 divs internos para que queden centrados en la superficie del que los engloba.

Te dejo un codigo de ejemplo:

Código:

<div style="height:20px; width:100px; background-color:#000">
    <div style="height:100%; width:25%; float:left; background-color:#F00"></div>
    <div style="height:100%; width:25%; float:left; background-color:#FF0"></div>
</div>

Ahora, a partir de ese codigo... como puedo alinear horizontalmente los divs interiores para que queden centrados?

Un saludo

gVenom · #4 (**permalink**) 07/06/2010, 11:37

lo que pasa es que no le has dado un margen, para que el div se separe de el borde izquierdo. Utiliza un margin-left: 25px; (eso fue calculado, usa el valor que se acomode) y me avisas.

dandarway · #5 (**permalink**) 07/06/2010, 11:45

Cita:

Iniciado por gVenom

lo que pasa es que no le has dado un margen, para que el div se separe de el borde izquierdo.

No se exactamente que podemos conseguir con eso, porque si le damos un "margin-left:XXpx;" al div externo, separa XXpixeles a la derecha del borde izquierdo, y si lo utilizamos en los divs internos me lo separa del div externo por la parte izquierda.
Otra cosa es que calculemos a que distancia deberia comenzar el primer div interno para asi conseguir el centrado de ambos, pero este es un codigo de ejemplo y en el interior del div que contiene todo iran divs con tamaños variables.

No se si entendi bien tu sugerencia...

Un saludo

gVenom · #6 (**permalink**) 07/06/2010, 11:57

Bueno, no se si me explique mal. yo puse to código asi:

Código HTML:

<html>
<head></head>
<body>
<div style="height:20px; width:100px; background-color:#000; border:1px;">
    <div style="height:100%; width:25%; float:left; background-color:#F00; border:1px; margin-left:12%"></div>
    <div style="height:100%; width:25%; float:left; background-color:#FF0; border:1px;"></div>
</div>
</body>
</html>

y me aparecen centrados los cuadritos de adentro.

dandarway · #7 (**permalink**) 07/06/2010, 12:06

De esa manera puedo centrar los divs internos para ese caso particular, es decir, para los tamaños que tienen en ese momento. Pero si los divs interiores varian dinamicamente su anchura, y en lugar de ser un 25%, fuera de un 34% por ejemplo, este caso ya no valdria.

Lo que intento conseguir es que sean de la anchura que sean, siempre y cuando la suma de ambos no supere al div que los engloba, queden centrados y uno junto al otro.

Claro que esta solucion sera mas complicada que andar con la cuenta la vieja ;)