Foros del Web » Creando para Internet » CSS »

Alinear 3 cuadros dentro de un contenedor

Estas en el tema de Alinear 3 cuadros dentro de un contenedor en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 25/07/2011, 13:12
Avatar de JHTKoZ  
Fecha de Ingreso: noviembre-2009
Ubicación: Teocaltiche, Mexico
Mensajes: 67
Antigüedad: 7 años, 6 meses
Puntos: 0
Alinear 3 cuadros dentro de un contenedor

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;
}

Última edición por JHTKoZ; 25/07/2011 a las 13:38
  #2 (permalink)  
Antiguo 25/07/2011, 13:42
 
Fecha de Ingreso: diciembre-2010
Mensajes: 9
Antigüedad: 6 años, 5 meses
Puntos: 0
Respuesta: Alinear 3 cuadros dentro de un contenedor

pone el html tambien, y poneles a todos float left para probar
  #3 (permalink)  
Antiguo 25/07/2011, 13:53
Avatar de JHTKoZ  
Fecha de Ingreso: noviembre-2009
Ubicación: Teocaltiche, Mexico
Mensajes: 67
Antigüedad: 7 años, 6 meses
Puntos: 0
Respuesta: Alinear 3 cuadros dentro de un contenedor

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 Ver Mensaje
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.

Última edición por JHTKoZ; 25/07/2011 a las 14:00
  #4 (permalink)  
Antiguo 25/07/2011, 15:45
Avatar de Batan  
Fecha de Ingreso: septiembre-2010
Ubicación: Madrid
Mensajes: 408
Antigüedad: 6 años, 8 meses
Puntos: 63
Respuesta: Alinear 3 cuadros dentro de un contenedor

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
  1. #contenido div{
  2.       float: left;
  3. }

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.
  #5 (permalink)  
Antiguo 25/07/2011, 19:05
Avatar de andresdzphp
Colaborador
 
Fecha de Ingreso: julio-2011
Ubicación: $this->Colombia;
Mensajes: 2.749
Antigüedad: 5 años, 10 meses
Puntos: 793
Respuesta: Alinear 3 cuadros dentro de un contenedor

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

Código CSS:
Ver original
  1. /* Técnica de limpieza de elementos flotantes */
  2.  
  3. .limpiar:after {
  4.     content:"";
  5.     display:block;
  6.     height:0;
  7.     clear:both;
  8.     visibility:hidden;
  9. }
  10.  
  11. .limpiar {
  12.     display:inline-block;
  13. }
  14.  
  15. .limpiar {
  16.     display:block;
  17. }
  18.  
  19. * html .limpiar {
  20.     height:1px;
  21. }

Código HTML:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3.  
  4. <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
  5. <title>Mis cuadritos alineados</title>
  6. <link href="Style.css" rel="stylesheet" type="text/css" />
  7.     </head>
  8.     <body>
  9.         <div id="contenido" class="limpiar">
  10.             <div id="cuadro_izquierda">
  11.            
  12.             </div>
  13.             <div id="cuadro_centro">
  14.            
  15.             </div>
  16.             <div id="cuadro_derecha">
  17.            
  18.             </div> 
  19.         </div>    
  20.      </body>
  21. </html>
__________________
Si sabemos como leer e interpretar el manual será mucho más fácil aprender PHP. En lugar de confiar en ejemplos o copiar y pegar - PHP
  #6 (permalink)  
Antiguo 26/07/2011, 13:44
 
Fecha de Ingreso: septiembre-2010
Ubicación: leon
Mensajes: 8
Antigüedad: 6 años, 7 meses
Puntos: 1
Respuesta: Alinear 3 cuadros dentro de un contenedor

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.

Etiquetas: Ninguno
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 01:58.