Como hago para que UL ocupe todo el DIV

posman · #1 (**permalink**) 01/04/2009, 15:27

Que tal. Ojala alguien me pueda ayudar.

Tengo un DIV y dentro de el una lista desordenada. Lo que quiero hacer es que el DIV (contenedor) vaya creciendo de acuerdo al tamaño de la lista. El inconveniente que tengo es que la lista es horizontal y al utilizar float:left el alto (height) del DIV se mantiene igual. Cuando hago vertical la lista, el DIV crece sin problemas.

Este es el codigo:

Código HTML:

<html>
<head>
<style>
#miDiv
{
	color: #000;
	border: 2px solid #000;
	padding-top: 10px;
	margin: 0;
	background: #ddd;
}
#miDiv ul
{
	padding: 0px;
	margin: 0px;
	width: 100%;
}
#miDiv ul li
{
	float: left;
	display: inline;
	width: 33%;
}
</style>
</head>
<body>
	<div id="miDiv">
		<ul>
			<li style="background:#f00;">asdkjfalsd akds foaisd ksafasfd<br>ashfda s8d9f7asdj fasd87fasd</li>
			<li style="background:#0f0;">asdkjfalsd akds foaisd ksafasfd<br>ashfda s8d9f7asdj fasd87fasd</li>
			<li style="background:#00f;">asdkjfalsd akds foaisd ksafasfd<br>ashfda s8d9f7asdj fasd87fasd</li>
		</ul>
	</div>
</body>
</html>

Asi es como se ve en un browser

El cuadro gris es el DIV contenedor.

Si pongo cualquier texto despues de </UL> (todavia dentro del DIV), si crece como deberia. Pero dentro del DIV no voy a poner nada de texto y el contenido de la lista sera variable.

Necesito poder hacer que crezca el height del DIV sin tener que especificarlo.

Triby · #2 (**permalink**) 01/04/2009, 16:00

Necesitas "cancelar" el float

Código:

/* En el CSS */
.corte-izq { clear:left; }


<!-- En el html debajo de </ul> -->
<div class="corte-izq"></div>

safe · #3 (**permalink**) 01/04/2009, 16:43

Si ademas de a los LIs, le agregas la propiedad float:left al UL y al DIV tambien solucionarias tu problema.

posman · #4 (**permalink**) 02/04/2009, 11:33

Ok, gracias por contestar. Ya resolvi este problema

Ahora tengo otra duda (notaran que no se me da muy bien esto de CSS).

Código HTML:

<html>
<head>
<style>
#divTop { width: 100%; border: 1px solid #000 }
#divTop ul { margin: 0px; padding: 0px }
#divTop ul li
{
	list-style-type: none;
	float: left;
	width: 32%;
	border-right: 2px solid #f00;
	padding: 5px;
}
#divTop ul li ul li { float: none; border: none; width: 100% }
</style>
</head>
<body>
	<div id="divTop">
		<ul>
			<li>
				<ul>
					<li>11111111 111111111 111111111</li>
					<li>11111111 111111111 111111111</li>
					<li>11111111 111111111 111111111</li>
				</ul>
			</li>
			<li>
				asdkjfalsd akds foaisd ksafasfd<br>ashfda s8d9f7asdj fasd87fasd
			</li>
			<li>
				asdkjfalsd akds foaisd ksafasfd<br>ashfda s8d9f7asdj fasd87fasd
			</li>
		</ul>
		<div style="clear:left;"></div>
	</div>
</body>

Puse un border-right a cada LI de la lista para usarlo como separador. Pero cuando uno de los LI crece mas que los demas, el borde derecho no es del mismo tamaño para todos.

Asi se ve:

Que propiedad tengo que cambiar para que, sin importar el tamaño del LI, todos tengan el borde derecho del mismo tamaño?

safe · #5 (**permalink**) 02/04/2009, 17:27

No hay ninguna propiedad para lograr eso. Hay varios trucos para lograr lo que quieres pero requieren imagenes de fondo o javascript para cambiar las alturas