Divs debajo alado de otro y ordenados

juan_14nob · #1 (**permalink**) 09/08/2011, 12:46

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<html>
<head>
<style type="text/css">
 
#todo{
    position:relative;
    width:860px;
    height:600px;
    background:red;
    color:white;
}
.adentro{
    float:left;
    height:auto !important;
    margin: 2px 0px 0px 5px; 
    padding:20px 0 10px 0px;
    background:black;
    width:200px;
 
 
}
</style>
</head>
<body>
    <div id="todo">
        <div class="adentro">
            <ul>
                <li>uno</li>
                <li>dos</li>
                <li>uno</li>
                <li>dos</li>
                <li>uno</li>
                <li>dos</li>                
                <li>uno</li>
                <li>dos</li>
                <li>uno</li>
                <li>dos</li>
            </ul>
        </div>
        <div class="adentro">
            <ul>
                <li>uno</li>
                <li>dos</li>
                <li>uno</li>
                <li>dos</li>
            </ul>   
        </div>
        <div class="adentro">
            <ul>
                <li>uno</li>
                <li>dos</li>
            </ul>
        </div>
        <div class="adentro">
            <ul>
                <li>uno</li>
                <li>dos</li>
                <li>uno</li>
                <li>dos</li>
                <li>uno</li>
                <li>dos</li>
                <li>uno</li>
                <li>dos</li>
            </ul>   
        </div>
        <div class="adentro">
            <ul>
                <li>uno</li>
                <li>dos</li>
                <li>uno</li>
                <li>dos</li>
                <li>uno</li>
                <li>dos</li>
            </ul>   
        </div>
        <div class="adentro">
            <ul>
                <li>uno</li>
                <li>dos</li>
        
            </ul>
        </div>
        <div class="adentro">
            <ul>
                <li>uno</li>
                <li>dos</li>
                <li>uno</li>
                <li>dos</li>
                <li>uno</li>
                <li>dos</li>
                <li>uno</li>
                <li>dos</li>
                <li>uno</li>
                <li>dos</li>
            </ul>   
        </div>
    </div>
</body>
</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

Karmac · #2 (**permalink**) 09/08/2011, 13:25

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.

juan_14nob · #3 (**permalink**) 09/08/2011, 13:43

Cita:

Iniciado por Karmac

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

Karmac · #4 (**permalink**) 09/08/2011, 14:58

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.

juan_14nob · #5 (**permalink**) 09/08/2011, 15:21

Cita:

Iniciado por Karmac

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!!