Foros del Web » Creando para Internet » CSS »

Como hago para que UL ocupe todo el DIV

Estas en el tema de Como hago para que UL ocupe todo el DIV en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 01/04/2009, 16:27
 
Fecha de Ingreso: enero-2008
Mensajes: 614
Antigüedad: 9 años, 11 meses
Puntos: 57
Como hago para que UL ocupe todo el DIV

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.
  #2 (permalink)  
Antiguo 01/04/2009, 17:00
Avatar de Triby
Mod on free time
 
Fecha de Ingreso: agosto-2008
Ubicación: $MX->Gto['León'];
Mensajes: 9.741
Antigüedad: 9 años, 4 meses
Puntos: 2113
Respuesta: Como hago para que UL ocupe todo el DIV

Necesitas "cancelar" el float

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


<!-- En el html debajo de </ul> -->
<div class="corte-izq"></div>
__________________
- León, Guanajuato
- GV-Foto
  #3 (permalink)  
Antiguo 01/04/2009, 17:43
 
Fecha de Ingreso: enero-2003
Ubicación: Córdoba, Argentina
Mensajes: 1.047
Antigüedad: 14 años, 10 meses
Puntos: 10
Respuesta: Como hago para que UL ocupe todo el DIV

Si ademas de a los LIs, le agregas la propiedad float:left al UL y al DIV tambien solucionarias tu problema.
__________________
oohh... quisiera ser godines!!!
  #4 (permalink)  
Antiguo 02/04/2009, 12:33
 
Fecha de Ingreso: enero-2008
Mensajes: 614
Antigüedad: 9 años, 11 meses
Puntos: 57
Respuesta: Como hago para que UL ocupe todo el DIV

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?
  #5 (permalink)  
Antiguo 02/04/2009, 18:27
 
Fecha de Ingreso: enero-2003
Ubicación: Córdoba, Argentina
Mensajes: 1.047
Antigüedad: 14 años, 10 meses
Puntos: 10
Respuesta: Como hago para que UL ocupe todo el DIV

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
__________________
oohh... quisiera ser godines!!!
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:26.