Foros del Web » Creando para Internet » CSS »

dividir pantalla en 4 divs automaticamente

Estas en el tema de dividir pantalla en 4 divs automaticamente en el foro de CSS en Foros del Web. hola amigos necesito dividir la pantalla en 4 divs automaticamente el orden de los div deben de ser asi div 1 div2 div 3 div4 ...
  #1 (permalink)  
Antiguo 26/07/2012, 21:44
 
Fecha de Ingreso: septiembre-2010
Mensajes: 1.853
Antigüedad: 13 años, 7 meses
Puntos: 6
dividir pantalla en 4 divs automaticamente

hola amigos necesito dividir la pantalla en 4 divs automaticamente


el orden de los div deben de ser asi

div 1 div2

div 3 div4



estoy cuantro divs estarian en un div padre

hasta el momento no puedo ajustar los divs los estoy mostrando seguidos

agredezco sus consejos gracias


Código CSS:
Ver original
  1. <style>
  2. #grande{ border: solid #FE2E2E;}
  3. #uno{ border: solid #FE2E2E;}
  4. #dos{ border: solid #FE2E2E;}
  5. #tres{ border: solid #FE2E2E;}
  6. #cuatro{ border: solid #FE2E2E;}                  
  7. </style>


Código HTML:
Ver original
  1. <div id="grande">
  2. <div id="uno">1</div>
  3. <br />
  4. <div id="dos">2</div>
  5. <br />
  6. <div id="tres">3</div>
  7. <br />
  8. <div id="cuatro">4</div>
  9. </div>
  #2 (permalink)  
Antiguo 26/07/2012, 21:54
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 21 años, 5 meses
Puntos: 317
Respuesta: dividir pantalla en 4 divs automaticamente

Si el body tiene alto y ancho, les das 46% de ancho y alto a cada uno y display:inline-block. También puedes flotar los dos primeros, hacer un clear y poner los segundos, pero puedes tener dificultades para que tomen un tamaño relativo.
  #3 (permalink)  
Antiguo 26/07/2012, 21:55
 
Fecha de Ingreso: febrero-2012
Mensajes: 99
Antigüedad: 12 años, 2 meses
Puntos: 4
Respuesta: dividir pantalla en 4 divs automaticamente

<div id="principal">
<div id="1">
</div>
<div id="2">
</div>
<div id="3">
</div>
<div id="4">
</div>
</div>

<style>
#1{
width:50%;
height:50%;
float:left;
}
#2{
width:50%;
height:50%;
float:right;
}
#3{
width:50%;
height:50%;
float:left;
}
#4{
width:50%;
height:50%;
float:right;
}

#principal{
width:100%
height:100%; (esto es lo que estoy en duda si se puede)
}

</style>
  #4 (permalink)  
Antiguo 26/07/2012, 22:13
 
Fecha de Ingreso: septiembre-2010
Mensajes: 1.853
Antigüedad: 13 años, 7 meses
Puntos: 6
Respuesta: dividir pantalla en 4 divs automaticamente

furoya y brai_lf gracias por responder

espero me ayuden , el div padre necesito que se ajuste a la pantalla por eso estoy utilizando
width:100%; y lo logro pero en height: auto; o height:100%; tengo problemas ,

necesito ubicar los div asi

div 1 div 2

div 3 div 4

formando una tabla dos filas y dos columnas

Código CSS:
Ver original
  1. <style>
  2. #grande{ border:1px solid #FE2E2E;
  3.          width:100%;
  4.          height: auto;
  5.        
  6.          }
  7. #uno{ border:1px solid #FE2E2E;
  8.       width:680px;
  9.       display:inline-block;
  10.      
  11. }
  12. #dos{ border:1px solid #FE2E2E;
  13.       width:680px;
  14.       display:inline-block;
  15.     }
  16. #tres{ border:1px solid #FE2E2E;
  17.        width:680px;
  18.        display:inline-block;
  19. }
  20. #cuatro{ border:1px solid #FE2E2E;
  21. width:680px;
  22. }                  
  23. </style>
  #5 (permalink)  
Antiguo 26/07/2012, 22:33
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 21 años, 5 meses
Puntos: 317
Respuesta: dividir pantalla en 4 divs automaticamente

Sí. Se entendió. A menos que estés omitiendo algún dato importante. Como que las cajas tienen ancho absoluto. Loq ue hace todo bastante más fácil.
El único problema sería que la pantalla fuera menos ancha que los dos div's, y entonces se van a acomodar abajo, como corresponde a cualquier página web decente.

Yo los tuve que achicar por eso para verlos.

Código:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<meta http-equiv=Content-Type content="text/html; charset=utf-8">
<title></title>
<script type="text/javascript">

</script>
<style type="text/css">
#grande{ /*border:1px solid #FE2E2E;*/
         width:100%;
         height: auto;       
	}
#uno{ border:1px solid #FE2E2E;
      width:400px;
      display:inline-block;     
	}
#dos{ border:1px solid #FE2E2E;
      width:400px;
      display:inline-block;
	}
#tres{ border:1px solid #FE2E2E;
       width:400px;
       display:inline-block;
	}
#cuatro{ border:1px solid #FE2E2E;
	width:400px;
       display:inline-block;
	}       
</style>
</head>
<body>

    <div id="grande">
    <div id="uno">1</div>
    <div id="dos">2</div><br>
    <div id="tres">3</div>
    <div id="cuatro">4</div>
    </div>

</body>
</html>
La próxima vez trata de poner el código completo. Aunque al menos vi que lo metiste entre sus etiquetas de código.

No como otros...


[edit]

Sí, ya te entendí. La altura no se va a ajustar como el ancho.

Ahora no me acuerdo cómo se hacía. Después lo pruebo, pero ya está respondido envarios sitios. ¿Seguro una tabla no te sirve?

[/edit]

Última edición por furoya; 26/07/2012 a las 22:41 Razón: Entendí...
  #6 (permalink)  
Antiguo 26/07/2012, 22:42
 
Fecha de Ingreso: septiembre-2010
Mensajes: 1.853
Antigüedad: 13 años, 7 meses
Puntos: 6
Respuesta: dividir pantalla en 4 divs automaticamente

furoya gracias por responder y asi es que necesito visuzalar los 4 divs pero tengo un par de preguntas:

-porque height: auto; no funciona necesito que el div grande ocupe tanto el ancho como el alto.

-como hago para que se los dos 4 divs y el grande se ajusten deacuerdo a cualquier pantalla

Código CSS:
Ver original
  1. #grande{ border:1px solid #FE2E2E;
  2.          width:100%;
  3.          height: auto;      
  4.     }
  #7 (permalink)  
Antiguo 26/07/2012, 22:52
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 21 años, 5 meses
Puntos: 317
Respuesta: dividir pantalla en 4 divs automaticamente

Byu mac urdé! R-sula q'ay cu...

(puf)

Perdón, me fui a lavar los dientes antes de acostarme y volví corriendo con el cepillo en la boca.

Digo, que ya me acordé. El problema es que el body y el html tienen que tener ancho y alto.

Prueba con esto y trata de ajustar los div's después.

Código:
body, html {height:100%; margin:0; padding:0; /*width:100%;*/}
Lo del ancho lo ves, porque en algún caso puede dar problemas al saltar alguna scrollbar innecesaria.




Y estaba por ahí en el Foro y en mil otros sitios, seguro. Era cuestión de buscar.
La próxima vez no me hagas salir corriendo del baño.
Menos mal que todavía me estaba cepillando los dientes. Podía haber sido peor...
  #8 (permalink)  
Antiguo 26/07/2012, 22:59
 
Fecha de Ingreso: septiembre-2010
Mensajes: 1.853
Antigüedad: 13 años, 7 meses
Puntos: 6
Respuesta: dividir pantalla en 4 divs automaticamente

furoya gracias por responder

el ancho esta bien pero como hago para que se despligue el alto osea que quede de toda la pantalla, y como hago para que los 4 divs queden automaticos
  #9 (permalink)  
Antiguo 26/07/2012, 23:06
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 21 años, 5 meses
Puntos: 317
Respuesta: dividir pantalla en 4 divs automaticamente

¡Empieza a probar con porcentajes! ¡Ya tienes un "marco" con medidas para que los div's las reconozcan!

¡En Baires son como las 2 de la mañana, y no me dejan ir a dormir, caramba!
  #10 (permalink)  
Antiguo 26/07/2012, 23:09
 
Fecha de Ingreso: septiembre-2010
Mensajes: 1.853
Antigüedad: 13 años, 7 meses
Puntos: 6
Respuesta: dividir pantalla en 4 divs automaticamente

ok voy a probar mañana posteo lo que hecho y me das tu punto de vista gracias
  #11 (permalink)  
Antiguo 26/07/2012, 23:27
 
Fecha de Ingreso: septiembre-2010
Mensajes: 1.853
Antigüedad: 13 años, 7 meses
Puntos: 6
Respuesta: dividir pantalla en 4 divs automaticamente

ya realice las pruebas

pero necesite que los divs quedes centrados y que el div grande tenga un alto hasta el momento no lo consigo

Código HTML:
Ver original
  1. <meta http-equiv=Content-Type content="text/html; charset=utf-8">
  2. <script type="text/javascript">
  3.  
  4. <style type="text/css">
  5. #grande{ border:1px solid #FE2E2E;
  6.         /* width:100%;
  7.          height: auto;  */    
  8.     }
  9. #uno{ border:1px solid #FE2E2E;
  10.       width:49.5%;
  11.       display:inline-block;    
  12.     }
  13. #dos{ border:1px solid #FE2E2E;
  14.       width:49.5%;
  15.       display:inline-block;
  16.     }
  17. #tres{ border:1px solid #FE2E2E;
  18.        width:49.5%;
  19.        display:inline-block;
  20.     }
  21. #cuatro{ border:1px solid #FE2E2E;
  22.     width:49.5%;
  23.        display:inline-block;
  24.     }
  25.     body, html {height:100%; margin:0; padding:0;width:100%;}      
  26. </head>
  27.  
  28.     <div id="grande">
  29.     <div id="uno">1</div>
  30.     <div id="dos">2</div><br>
  31.     <div id="tres">3</div>
  32.     <div id="cuatro">4</div>
  33.     </div>
  34.  
  35. </body>
  36. </html>
  #12 (permalink)  
Antiguo 27/07/2012, 08:13
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 21 años, 5 meses
Puntos: 317
Respuesta: dividir pantalla en 4 divs automaticamente

No hiciste ninguna prueba. La caja grande no tiene altura porque no se la pusiste.

¿De verdad no sabes CSS, o sabes pero vienes a ver cuántos mensajes puedes juntar para tu tema preguntando lo que es evidente?

Código:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd"><head>
<meta http-equiv=Content-Type content="text/html; charset=utf-8">
<title></title>
<style type="text/css">
body, html { height:100%; 
	margin:0; 
	padding:0;
	width:100%; 
	background-color:silver;
	}

#grande{ border:1px solid white;
	width:99%;
	height:99%;    
	margin:auto;     
	text-align:center;
	font-size:300%;
	}
#uno{ border:1px solid black;
	width:49.5%;
	display:inline-block;     
	margin:auto;     
	height:49.5%;    
	background-color:blue;
	}
#dos{ border:1px solid black;
	width:49.5%;
	display:inline-block;
	height:49.5%;    
	background-color:green;
	}
#tres{ border:1px solid black;
	width:49.5%;
	display:inline-block;
	height:49.5%;    
	background-color:yellow;
	}
#cuatro{ border:1px solid black;
	width:49.5%;
	display:inline-block;
	height:49.5%;    
	background-color:red;
	} 
</style>
</head>
<body>
	<div id="grande">
	<div id="uno">1</div><div id="dos">2</div><br>
	<div id="tres">3</div><div id="cuatro">4</div>
	</div>
</body>
</html>
¿Qué problema vas a tener para seguir desde aquí?
  #13 (permalink)  
Antiguo 27/07/2012, 13:00
 
Fecha de Ingreso: septiembre-2010
Mensajes: 1.853
Antigüedad: 13 años, 7 meses
Puntos: 6
Respuesta: dividir pantalla en 4 divs automaticamente

furoya gracias por responder


mira lo que pasa es que apenas estoy aprendiendo css, y lo que para ti es muy obvio para mi no lo es por eso estoy estudiando y probando , por ejemplo ya esta dividida la panta en 4 divs que se ajusta dependiendo de la resolucion de pantalla y ahora necesito que en cada div aparezca una imagen la cual originalmente tiene una resolucion de 1600x1200 la idea es que las imagenes se ajusten al tamaño de cada div.

la idea que tengo es la siguiente:

le doy el ancho y el alto a la imagen del div pero ahi es donde todo se me descuadra los div el segundo div pasa a la parte de abajo , de la unica forma que los div sigan como estaban es que la imagen tenga un ancho y un alto de 10%


css
Código codigo:
Ver original
  1. #imagen1{
  2. width:40.5%;
  3. height:40.5%;
  4. }



en el cuerpo html

Código codigo:
Ver original
  1. <div id="uno"><img src="Persp20120726_055526M.jpg" id="imagen1"></div>


pero la imagen con ese tamaño queda muy pequeña muy chica yo la necesito que quede del tamaño del div
  #14 (permalink)  
Antiguo 27/07/2012, 15:17
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 21 años, 5 meses
Puntos: 317
Respuesta: dividir pantalla en 4 divs automaticamente

De nada, Montes28.

Y no es que "apenas estás aprendiendo". Es que no sabes. Y punto.
Hay cosas con las que puedes experimentar, pero otras ya las tienes que traer sabidas. Son CSS básico, por no hablar del sentido común.

¿Ahora resulta que los div's llevaban imágenes? ¿Y no se te ocurrió pensar que un div y su contenido de texto sí se puede ajustar, pero para una imagen es imposible?. O no, pero en la mayoría de los casos se te va a deformar.
Por supuesto que si esa imagen no tiene diseño, sino que es solamente un "color"; que se deforme no tiene la menor importancia. Pero no estás explicando qué clase de imagen es, y para mostrar colores, se usa el ejemplo que puse arriba.

Entonces hay que elegir si las fotos se van a ajustar solamente en ancho, o solamente en alto, y donde sobre se corta, y donde falte que se vea el fondo.

Y si elegimos, por ejemplo el ancho, se le da el 100% al width.

Claro que si no te importa que se estiren, le das también su 100% al height. Pero para eso ni hacen falta los div's : con poner 2 imágenes arriba y 2 abajo alcanza. Y todo lo que se explicó antes estuvo de más.

También está la posibilidad de meter las imágenes como fondo de cada div, pero eso lo sabrías si hubieses leído algún manual de CSS. La ventaja estaría en que si una imagen no carga, seguro no aparecen "saltos" de diseño porque no tienen alto o ancho..

Código:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd"><head>
<meta http-equiv=Content-Type content="text/html; charset=utf-8">
<title>4 IMÁGENES.</title>
<style type="text/css">
body, html { height:100%; 
	margin:0; 
	padding:0;
	width:100%; 
	background-color:silver;
	}

#grande{ width:100%;
	height:100%;    
	margin:0;     
	text-align:center;
	}
#uno{ width:50%;
	display:inline-block;     
	margin:auto;     
	height:50%;    
	background-color:blue;
	overflow:hidden;
	}
#dos{ width:50%;
	display:inline-block;
	height:50%;    
	background-color:green;
	overflow:hidden;
	}
#tres{ width:50%;
	display:inline-block;
	height:50%;    
	background-color:yellow;
	overflow:hidden;
	}
#cuatro{ width:50%;
	display:inline-block;
	height:50%;    
	background-color:red;
	overflow:hidden;
	} 

img{ width:100%; 
	/*height:100%;*/
	}

</style>
</head>
<body>
	<div id="grande">
	<div id="uno"><img 
	src="http://img62.imageshack.us/img62/5510/lorenzoamengual.jpg"></div><div 
	id="dos"><img 
	src="http://img96.imageshack.us/img96/5585/briancorin1.jpg"></div><br>
	<div id="tres"><img 
	src="http://img838.imageshack.us/img838/7460/alfredobenavidezbedoya2.jpg"></div><div 
	id="cuatro"><img 
	src="http://img62.imageshack.us/img62/7433/romulomaccio.jpg"></div>
	</div>
</body>
</html>
Vamos a ver qué inventas ahora ...
  #15 (permalink)  
Antiguo 27/07/2012, 22:29
 
Fecha de Ingreso: septiembre-2010
Mensajes: 1.853
Antigüedad: 13 años, 7 meses
Puntos: 6
Respuesta: dividir pantalla en 4 divs automaticamente

furoya gracias por responder e aprendido mucho con lo que me has indicado

Última edición por Montes28; 28/07/2012 a las 06:56
  #16 (permalink)  
Antiguo 28/07/2012, 12:29
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 21 años, 5 meses
Puntos: 317
Respuesta: dividir pantalla en 4 divs automaticamente

De nada.

Y anoche me preguntaba cuál sería la próxima vuelta que le ibas a dar al pedido.
Hoy ya lo sé.

La idea es que si se tiene un problema en una página web, se lo explique completo desde el principio. No se puede cambiar el planteo cada tres mensajes.

Si (por ejemplo) tuvieses que meter cuatro sliders de fotos, la estructura debería ser totalmente distinta, porque hay que ver cómo se adapta un plug-in pensado para otro diseño en lo que estás pretendiendo hacer. Y si no está previsto por quien lo programó en sus tutoriales ¿los cambios en el programa los vas a hacer tú?

No los hace nadie. Sale más barato crearlo desde cero a la medida de lo que uno necesita.

Pero de última, siempre se puede preguntar en el Foro de Frameworks.
No digo en forma privada, porque en este sitio no se debe. A riesgo de que terminemos todos baneados.
  #17 (permalink)  
Antiguo 28/07/2012, 12:40
 
Fecha de Ingreso: septiembre-2010
Mensajes: 1.853
Antigüedad: 13 años, 7 meses
Puntos: 6
Respuesta: dividir pantalla en 4 divs automaticamente

furoya gracias por redponder

me parece que el foro es de gran ayuda para quienes no sabemos ya que ustedes con el conocimiento y la experiencia nos ayudan a aprender.

estoy trabajandole duro a los del sliders ya que necesito 4 en una sola pantalla, quisiera que me aconsejaras abro un posto con este tema , quiero seguir las reglas del foro y no ser penalisado.

gracias
  #18 (permalink)  
Antiguo 28/07/2012, 20:44
 
Fecha de Ingreso: enero-2012
Ubicación: Santiago de Surco, Lima - Perú
Mensajes: 266
Antigüedad: 12 años, 2 meses
Puntos: 57
Información Respuesta: dividir pantalla en 4 divs automaticamente

Cita:
Iniciado por furoya Ver Mensaje
Si (por ejemplo) tuvieses que meter cuatro sliders de fotos...
Cita:
Iniciado por Montes28 Ver Mensaje
estoy trabajandole duro a los del sliders ya que necesito 4 en una sola pantalla, ...
furoya eso fue una predicción?
  #19 (permalink)  
Antiguo 28/07/2012, 21:04
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 21 años, 5 meses
Puntos: 317
Respuesta: dividir pantalla en 4 divs automaticamente

Es que nuestra bola de cristal sirve para adivinar lo que preguntan, ... y lo que van a preguntar.

Etiquetas: automaticamente, dividir, divs, pantalla
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 15:23.