Alinear 3 cuadros dentro de un contenedor

JHTKoZ · #1 (**permalink**) 25/07/2011, 13:12

Mi duda es esta, quiero acomodar 3 cuadritos dentro de un div contenedor, y que queden los 3 alineados, pero cuando hago me los acomoda en escalerita, luego puse el "float: left" en el cuadro_izquierda y me alinea el del centro, pero el cuadro_derecha al ponerle el "float: right;" me lo deja fuera del contenedor, que puedo hacer para alinear los 3?. Éste es mi css:

Código:

#contenedor
{
	width: 1024px;
	height:auto; 
    background-color:transparent;
	border: 1px solid black;
    margin: 0px auto; 
    text-align:center;
}
#cuadro_izquierda
{
	width: 210px;
	height:170px; 
    background-color:transparent;
	border: 1px solid black;
    margin: 130px 50px; 
    text-align:center;
	float: left;
}
#cuadro_centro
{
	width: 210px;
	height:170px; 
    background-color:transparent;
	border: 1px solid red;
    margin: 130px 310px; 
    text-align:center;
}
#cuadro_derecha
{
	width: 210px;
	height:170px; 
    background-color:transparent;
	border: 1px solid blue;
    margin: 130px 570px; 
    text-align:center;
    float: right;
}

chuncho_villero10 · #2 (**permalink**) 25/07/2011, 13:42

pone el html tambien, y poneles a todos float left para probar

JHTKoZ · #3 (**permalink**) 25/07/2011, 13:53

HTML:

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Mis cuadritos alineados</title>
<link href="Style.css" rel="stylesheet" type="text/css" />
  	</head>
	<body>
		<div id="contenido">
			<div id="cuadro_izquierda">
			
			</div>
			<div id="cuadro_centro">
			
			</div>
			<div id="cuadro_derecha">
			
			</div>	
		</div>    
     </body>
</html>

Cita:

Iniciado por chuncho_villero10

pone el html tambien, y poneles a todos float left para probar

Ya les puse float: left a todos y me los pone en escalera pero fuera de mi contenedor.

Batan · #4 (**permalink**) 25/07/2011, 15:45

Deberias poner tu código css, para saber más detalladamente que le pasa.

De todas formas prueba a agregar esta linea en tu hoja de estilos.

Código CSS:

Ver original#contenido div{
      float: left;
}

Y si te sigue saliendo en escalera, pon tu código css; aunque también creo que tu fallo puede deberse a que el ancho de cada uno de los div contenidos sea mayor y por lo tanto se desalinee, en todo caso deberias ajustar bien la anchura de los DIV.

andresdzphp · #5 (**permalink**) 25/07/2011, 19:05

Para que queden adentro de tu contenedor siempre usa esta clase cuando te vuelva a pasar:

Código CSS:

Ver original/* Técnica de limpieza de elementos flotantes */
 
.limpiar:after {
    content:""; 
    display:block; 
    height:0; 
    clear:both; 
    visibility:hidden;
}
 
.limpiar {
    display:inline-block;
}
 
.limpiar {
    display:block;
}
 
* html .limpiar {
    height:1px;
}

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Mis cuadritos alineados</title>
<link href="Style.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
        <div id="contenido" class="limpiar">
            <div id="cuadro_izquierda">
            
            </div>
            <div id="cuadro_centro">
            
            </div>
            <div id="cuadro_derecha">
            
            </div>  
        </div>    
     </body>
</html>

mekhalil · #6 (**permalink**) 26/07/2011, 13:44

El problema que tienes esta en el margin, no entiendo exactamente lo que quieres hacer con el pero creo para posicionar cada uno de los div y es un error, en este caso se relacionan entre si, para corregirlo tiene que ser de la siguiente forma:
float: left; en cada uno de los div que estan dentro
margin-right : "distancia de separacion entre cada uno"
para centrar los te aconsejo de usar otro div que les contiene todos.

Creo que tu codigo tiene que ser de la siguiente forma

Código:

#contenedor {
    background-color: transparent;
    border: 1px solid black;
    height: auto;
    margin: 0 auto;
    text-align: center;
    width: 1024px;
}
#cuadro_izquierda {
    background-color: red;
    border: 1px solid black;
    float: left;
    height: 170px;
    text-align: center;
    width: 210px;
    margin-right: 20px;
    margin-top: 130px;
}
#cuadro_centro {
    background-color: blue;
    border: 1px solid red;
    height: 170px;
    text-align: center;
    width: 210px;
    float: left;
    margin-right: 20px;
    margin-top: 130px;
}
#cuadro_derecha {
    background-color: yellow;
    border: 1px solid blue;
    float: right;
    height: 170px;
    text-align: center;
    width: 210px;
    float: left;
    margin-top: 130px;
}

Espero que le haya servido.