Foros del Web » Creando para Internet » CSS »

Divs debajo alado de otro y ordenados

Estas en el tema de Divs debajo alado de otro y ordenados en el foro de CSS en Foros del Web. Hola, estoy queriendo poner en un div llamado "todo" otros divs que contienen listas ( <ul> ) pero cada div tiene un height auto, el ...
  #1 (permalink)  
Antiguo 09/08/2011, 12:46
Avatar de juan_14nob  
Fecha de Ingreso: abril-2010
Mensajes: 552
Antigüedad: 7 años, 4 meses
Puntos: 6
Divs debajo alado de otro y ordenados

Hola, estoy queriendo poner en un div llamado "todo" otros divs que contienen listas ( <ul> ) pero cada div tiene un height auto, el problema es que no se hubica uno alado de otro y debajo como yo quiero..

observen esta imagen, como se ve.


Aca les dejo el codigo por si lo quieren ver..

Código HTML:
Ver original
  1. <style type="text/css">
  2.  
  3. #todo{
  4.     position:relative;
  5.     width:860px;
  6.     height:600px;
  7.     background:red;
  8.     color:white;
  9. }
  10. .adentro{
  11.     float:left;
  12.     height:auto !important;
  13.     margin: 2px 0px 0px 5px;
  14.     padding:20px 0 10px 0px;
  15.     background:black;
  16.     width:200px;
  17.  
  18.  
  19. }
  20. </head>
  21.     <div id="todo">
  22.         <div class="adentro">
  23.             <ul>
  24.                 <li>uno</li>
  25.                 <li>dos</li>
  26.                 <li>uno</li>
  27.                 <li>dos</li>
  28.                 <li>uno</li>
  29.                 <li>dos</li>               
  30.                 <li>uno</li>
  31.                 <li>dos</li>
  32.                 <li>uno</li>
  33.                 <li>dos</li>
  34.             </ul>
  35.         </div>
  36.         <div class="adentro">
  37.             <ul>
  38.                 <li>uno</li>
  39.                 <li>dos</li>
  40.                 <li>uno</li>
  41.                 <li>dos</li>
  42.             </ul>  
  43.         </div>
  44.         <div class="adentro">
  45.             <ul>
  46.                 <li>uno</li>
  47.                 <li>dos</li>
  48.             </ul>
  49.         </div>
  50.         <div class="adentro">
  51.             <ul>
  52.                 <li>uno</li>
  53.                 <li>dos</li>
  54.                 <li>uno</li>
  55.                 <li>dos</li>
  56.                 <li>uno</li>
  57.                 <li>dos</li>
  58.                 <li>uno</li>
  59.                 <li>dos</li>
  60.             </ul>  
  61.         </div>
  62.         <div class="adentro">
  63.             <ul>
  64.                 <li>uno</li>
  65.                 <li>dos</li>
  66.                 <li>uno</li>
  67.                 <li>dos</li>
  68.                 <li>uno</li>
  69.                 <li>dos</li>
  70.             </ul>  
  71.         </div>
  72.         <div class="adentro">
  73.             <ul>
  74.                 <li>uno</li>
  75.                 <li>dos</li>
  76.        
  77.             </ul>
  78.         </div>
  79.         <div class="adentro">
  80.             <ul>
  81.                 <li>uno</li>
  82.                 <li>dos</li>
  83.                 <li>uno</li>
  84.                 <li>dos</li>
  85.                 <li>uno</li>
  86.                 <li>dos</li>
  87.                 <li>uno</li>
  88.                 <li>dos</li>
  89.                 <li>uno</li>
  90.                 <li>dos</li>
  91.             </ul>  
  92.         </div>
  93.     </div>
  94. </body>
  95. </html>


y lo que yo quiero hacer es esto..



observece como los divs se ubican bien posicionados , eso lo logre dandole un height fijo a los divs cuadrados (fondo negro), pero mi problema se encuentra al tener una altura automatica, osea, a medida que las listas vallan creciendo con elementos el cuadrado valla creciendo tambien o viceversa. espero que me hechen una mano..


Saludos
  #2 (permalink)  
Antiguo 09/08/2011, 13:25
Avatar de Karmac  
Fecha de Ingreso: agosto-2011
Ubicación: Bilbao
Mensajes: 196
Antigüedad: 6 años, 1 mes
Puntos: 34
Respuesta: Divs debajo alado de otro y ordenados

Añade un div por cada línea que quieras, después, a los que tienen las listas les pones height: 100%;.

<div class="fila">
<div class="adentro"></div>
</div>

.fila tendría 100% de ancho y altura automatica. Dime si te funciona, no lo he probado, es solo teoría mía jaja.
Saludos.
  #3 (permalink)  
Antiguo 09/08/2011, 13:43
Avatar de juan_14nob  
Fecha de Ingreso: abril-2010
Mensajes: 552
Antigüedad: 7 años, 4 meses
Puntos: 6
Respuesta: Divs debajo alado de otro y ordenados

Cita:
Iniciado por Karmac Ver Mensaje
Añade un div por cada línea que quieras, después, a los que tienen las listas les pones height: 100%;.

<div class="fila">
<div class="adentro"></div>
</div>

.fila tendría 100% de ancho y altura automatica. Dime si te funciona, no lo he probado, es solo teoría mía jaja.
Saludos.
no entiendo lo que me queres decir...
  #4 (permalink)  
Antiguo 09/08/2011, 14:58
Avatar de Karmac  
Fecha de Ingreso: agosto-2011
Ubicación: Bilbao
Mensajes: 196
Antigüedad: 6 años, 1 mes
Puntos: 34
Respuesta: Divs debajo alado de otro y ordenados

Lo siento, pero lo que yo te decía no funcionaba. He estado aquí una hora probando y buscando por Internet y he dado con la solucción, te dejo el ejemplo que acabo de hacer. Lo que está entre los dos comentarios es lo que hace la magia.

Código HTML:
<style type="text/css">
.wrapper {
	width: 800px;
	border-right: 4px solid red;
}

.row {
	border-right: 4px solid aqua;
	margin-bottom: 20px;
	
	/* -- */
	overflow: hidden;
	/* -- */
}

.col {
	background: lime;
	margin-left: 8px;
	width: 190px;
	
	/* -- */
	float: left;
	padding-bottom: 100%;
	margin-bottom: -100%;
	/* -- */
}
</style>

<div class="wrapper">
	<div class="row">
		<div class="col">
			<ul>
				<li>Item 1</li>
				<li>Item 2</li>
				<li>Item 3</li>
				<li>Item 4</li>
			</ul>
		</div>
		<div class="col">
			<ul>
				<li>Item 1</li>
				<li>Item 2</li>
			</ul>
		</div>
		<div class="col">
			<ul>
				<li>Item 1</li>
				<li>Item 2</li>
				<li>Item 3</li>
				<li>Item 4</li>
				<li>Item 5</li>
				<li>Item 6</li>
			</ul>
		</div>
		<div class="col">
			<ul>
				<li>Item 1</li>
				<li>Item 2</li>
				<li>Item 3</li>
				<li>Item 4</li>
			</ul>
		</div>
	</div>
	<div class="row">
		<div class="col">
			<ul>
				<li>Item 1</li>
				<li>Item 2</li>
				<li>Item 3</li>
			</ul>
		</div>
		<div class="col">
			<ul>
				<li>Item 1</li>
				<li>Item 2</li>
				<li>Item 3</li>
			</ul>
		</div>
		<div class="col">
			<ul>
				<li>Item 1</li>
				<li>Item 2</li>
				<li>Item 3</li>
				<li>Item 4</li>
				<li>Item 5</li>
				<li>Item 6</li>
				<li>Item 7</li>
			</ul>
		</div>
		<div class="col">
			<ul>
				<li>Item 1</li>
				<li>Item 2</li>
				<li>Item 3</li>
			</ul>
		</div>
	</div>
</div> 
Saludos.
  #5 (permalink)  
Antiguo 09/08/2011, 15:21
Avatar de juan_14nob  
Fecha de Ingreso: abril-2010
Mensajes: 552
Antigüedad: 7 años, 4 meses
Puntos: 6
Respuesta: Divs debajo alado de otro y ordenados

Cita:
Iniciado por Karmac Ver Mensaje
Añade un div por cada línea que quieras, después, a los que tienen las listas les pones height: 100%;.

<div class="fila">
<div class="adentro"></div>
</div>

.fila tendría 100% de ancho y altura automatica. Dime si te funciona, no lo he probado, es solo teoría mía jaja.
Saludos.
muchas gracias, ya lo hice como me dijiste..


saludos!!

Etiquetas: debajo, divs, fondo, html
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 18:12.