contenedor no se adapta a contenidos

[_franb]

Amigos, mi problema es con un menú desplegable que no se adapta al tamaño del contenido. No puedo enlanzarlos al link de la maqueta, pero voy a intentar reproducir el código del flayout con las propiedades principales:

Código HTML:

<div style="position:absolute; white-space:nowrap"><!--position absolute para poder hacer el efecto de desplegar-->
      <ul>
            <li style="overflow:hidden"><!--overflow para que se estire a pesar de los float-->
                 <div style="float:left">imagen</div>
                 <div style="float:left; white-space:nowrap">texto</div>
            </li>
      </ul>
</div> 

Bien, el contenedor se estira pero no lo suficiente como para que los contenidos con 'float:left' se posicionen uno al lado del otro. ¿Por qué?

mil gracias!

[C2am]

Hola
Al contenedor debes fijarle el ancho, y además debes "limpiar los float"

Saludos

[_franb]

Iniciado por C2am

Hola
Al contenedor debes fijarle el ancho, y además debes "[URL="http://www.librosweb.es/css_avanzado/capitulo1/limpiar_floats.html"]limpiar los float[/URL]"

Saludos

C2am agradezco tu respuesta, pero si hago lo que me recomendás sencillamente dejo de obtener el resultado visual que estoy buscando.

[C2am]

Y cual es el efecto visual?

[_franb]

intentaré ser más específico colega.

Construí el siguiente ejemplo de modo muy rudimentario:
[URL="fbergamaschi.com.ar/experience/"]ejemplo[/URL]

Código HTML:

<style>
nav { width:800px; height:30px; margin:0 auto; border-style:solid none; border-color:#666666; border-width:1px 0}
ul { width:100%; height:100%; padding:0; margin:0; list-style:none}
li { width:100px; height:100%; position:relative; font:bold 14px Arial, Helvetica, sans-serif; text-align:center}
	li:hover { background-color:#cccccc}
	li:hover > div.desplegable { display:block}
div.desplegable { display:none; position:absolute; top:100%; background-color:#CCCCCC; border:1px solid #999999; padding:20px; overflow:hidden; white-space: nowrap;}
div.desplegable > figure { float:left; width:24px; height:25px; margin:0 10px 0 0;}
div.desplegable > p { float:left; white-space:nowrap; font:14px Arial, Helvetica, sans-serif; margin:0}
</style>

<nav>
     <ul>
    	<li>item men&uacute;
        	<div class="desplegable">
            	<figure><img src="nav-user-drop.png" alt="avatar" /></figure>
                <p>Lorem Ipsum</p>
            </div>
        </li>
    </ul>
</nav> 

Quisiera que 'div.desplegable' tenga una ancho dinámico (adaptable) de acuerdo al contenido en su interior.
Como la imagen como el texto en '.desplegable' es traído de modo dinámico (por consulta a BD), no puedo saber de antemano qué tamaño ocupará.

Me gustaría generar esto mediante CSS evitando usar un script que sume el ancho de los contenidos y me devuelva un ancho fijo para el contenedor. Pero si no existe solución iré por el script.

Al parecer, en Chrome funciona, pero no en Firefox

Es más clara ahora mi consulta?

gracias!

p/d: cómo incluyo código CSS en los post del FORO? sólo me da la opción para HTML

[C2am]

En firefox 10.0.2 creo que también funciona.

Sobre el código CSS te debería aparecer en la lista desplegable del Highlight.

Sigo viendo donde podrá estar el inconveniente y te respondo más tarde

[cristian_cena]

Iniciado por _franb

Quisiera que 'div.desplegable' tenga una ancho dinámico (adaptable) de acuerdo al contenido en su interior.
Como la imagen como el texto en '.desplegable' es traído de modo dinámico (por consulta a BD), no puedo saber de antemano qué tamaño ocupará.

Podrías usar la propiedad "display" junto al valor "inline-block". Además de quitar el width para que no quede fijo, aunque pudiendo jugar con min-width y max-width.

Código CSS:

div.desplegable { 
display:inline-block;
/*...etc...*/
}
 

pd: ie8+ (ie7)

[_franb]

Me colgué con la respuesta cristian_cena. MIL GRACIAS!
La verdad que la opción de 'display:inline-block;' no funcionó pero me hizo conocer una propiedad muy útil que he comenzado a aplicar en diversas maquetaciones.

Finalmente, tuve que optar por min-width y max-width, aunque no me parece muy elegante. Me parece que CSS tiene baches en este tema, las cajas con valor 'position:absolute' no se estiran con su contenido y eso me genera dolor de cabeza en más de un proyecto.

otra vez, gracias y abrazo!

[cristian_cena]

Iniciado por _franb

'position:absolute' no se estiran con su contenido y eso me genera dolor de cabeza en más de un proyecto.

Si queres mostranos el código y lo vemos, pueden ser varias cosas y estaría bueno poder poner foco en tu problema en concreto.