Como fazer mergulho não maior do que o seu conteúdo?

Você quer um elemento de bloco que tenha o que o CSS chama de shrink-to-fit width e a especificação não fornece uma forma abençoada de obter tal coisa. No CSS2, shrink-to-fit não é um objectivo, mas significa lidar com uma situação em que o browser "tem de" obter uma largura a partir do nada. Essas situações são:

• flutuador
• elemento absolutamente posicionado
• elemento em bloco em linha
• elemento de tabela

quando não há largura especificada. Ouvi dizer que eles pensam em adicionar o que você quer no CSS3. Por enquanto, contente-se com um dos anteriores.

A decisão de não expor diretamente a característica pode parecer estranha, mas há uma boa razão para isso. É caro. Shrink-to-fit significa formatar pelo menos duas vezes: você não pode começar a formatar um elemento até saber sua largura, e você não pode calcular a largura sem passar por todo o conteúdo. Além disso, não é necessário encolher o elemento com a mesma frequência com que se pensa. Por que você precisa de um mergulho extra ao redor da sua mesa? Talvez a legenda da tabela seja tudo o que você precisa.

Não sabendo em que contexto isso irá aparecer, mas acredito que a propriedade estilo CSS float ou esquerda ou direita terá esse efeito. Por outro lado, ela também terá outros efeitos colaterais, como permitir que o texto flutue ao redor dela.

Por favor, me corrija se eu estiver errado, mas não tenho 100% de certeza, e atualmente não posso testá-lo eu mesmo.

Uma solução compatível com CSS2 é para ser usada:

.my-div
{
    min-width: 100px;
}

Você também pode flutuar seu mergulho, o que o forçará a ser o menor possível, mas você precisará usar um clearfix se alguma coisa dentro do seu mergulho estiver flutuando:

.my-div
{
    float: left;
}