Come rendere il div non più grande del suo contenuto?

Volete un elemento a blocchi che abbia quello che i CSS chiamano shrink-to-fit width e le specifiche non forniscono un modo benedetto per ottenere una cosa del genere. In CSS2, shrink-to-fit non è un obiettivo, ma un mezzo per affrontare una situazione in cui il browser "deve" ottenere una larghezza dal nulla. Queste situazioni sono:

• float
• elemento assolutamente posizionato
• elemento inline-block
• elemento tabella

quando non ci sono larghezze specificate. Ho sentito che pensano di aggiungere quello che vuoi in CSS3. Per ora, accontentati di uno dei precedenti.

La decisione di non esporre direttamente la funzione può sembrare strana, ma c'è una buona ragione. È costoso. Shrink-to-fit significa formattare almeno due volte: non si può iniziare a formattare un elemento finché non si conosce la sua larghezza, e non si può calcolare la larghezza senza passare attraverso l'intero contenuto. Inoltre, non si ha bisogno dell'elemento shrink-to-fit così spesso come si potrebbe pensare. Perché hai bisogno di un div extra intorno alla tua tabella? Forse la didascalia della tabella è tutto ciò di cui hai bisogno.

Non sapendo in quale contesto questo apparirà, ma credo che la proprietà CSS-style float o left o right avrà questo effetto. D'altra parte, avrà anche altri effetti collaterali, come permettere al testo di galleggiare intorno ad esso.

Per favore correggetemi se mi sbaglio, non sono sicuro al 100% e attualmente non posso testarlo.

Una soluzione compatibile con i CSS2 è quella di usare:

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

Puoi anche far fluttuare il tuo div che lo forzerà il più piccolo possibile, ma avrai bisogno di usare un clearfix se qualcosa dentro il tuo div è fluttuante:

.my-div
{
    float: left;
}