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.