Ajustar el ancho de un DIV al contenido

Por defecto el ancho de un div (o de cualquier elemento de bloque) se expande hasta ocupar el 100% del espacio disponible. A veces podemos necesitar cambiar este comportamiento para que se ajuste automáticamente al ancho de su contenido:

Hay varias formas de conseguir esto pero todas son ‘pequeñas chapuzas’ y tienen efectos secundarios. CSS no proporciona una forma elegante de hacerlo.
En el estándar CSS, ajustar el ancho al contenido es sólo un recurso para las situaciones en las que se necesita asignar un ancho y no hay uno definido ni fijado por defecto. Lo que necesitamos es crear una de estas situaciones, que son:

• float
• posición absoluta
• inline-block ( o inline)
• table

Float

.myDiv {
    float:left;  /* o float:right;*/
}

Haciendo el elemento flotante conseguimos el objetivo, pero es necesario conocer muy bien las propiedades de los elementos flotantes porque los efectos secundarios afectan al comportamiento del div y al resto de contenido.

Posición absoluta

.myDiv {
    position:absolute;
}

Esta solución también tiene efectos secundarios importantes:

• El div sale del flujo natural de elementos en la página y no ocupa espacio para el resto de elementos, que pueden descolocarse.
• Se posiciona con respecto al elemento que lo contiene ( si éste está posicionado ).

Inline-block

.myDiv {
    display:inline-block;
}

Esta solución es, quizá, la más elegante. Hay un par de cosas que tenemos que tener en cuenta:

• El elemento se colocará ‘en línea’ con otros elementos, si los hay.
• Para que funcione en IE7 necesita un hack o cambiar el div por un span.

El problema con IE7 ( y con IE6 pero ya es hora de ir descartándolo ) es que sólo soportan inline-block para elementos que son inline por defecto. Por eso, a parte del hack, una solución sencilla es cambiar el div por un span y aplicarle display:inline-block. El resultado en el resto de navegadores será el correcto.

Table

.myDiv {
    display:table;
}

Dejando aparte el estigma que tiene la palabra table, este es un método que apenas tiene efectos secundarios. El único problema es que no funciona en IE6/7.

Ajustar al contenido es costoso (poco eficiente)

Siempre que podamos es preferible utilizar anchos fijos o anchos asignados por defecto. Para el navegador es un proceso mucho más sencillo. Para presentar un elemento de bloque que se ajuste automáticamente a su contenido debe primero calcular los tamaños de todos los contenidos y despues volver al elemento contenedor para calcular su anchura y presentarlo.


Fuentes:
CSS “shrink wrap”
StackOverflow Cross browser inline-block