Hvordan gør man div ikke større end dets indhold?

Du vil have et blokelement, der har det, CSS kalder krymper til tilpasningsbredde, og specifikationen giver ikke en velsignet måde at få sådan noget på. I CSS2 er shrink-to-fit ikke et mål, men et middel til at håndtere en situation, hvor browseren "er nødt til" at finde en bredde ud af den blå luft. Disse situationer er:

• float
• absolut positioneret element
• inline-block element
• tabel-element

når der ikke er angivet nogen bredde. Jeg har hørt, at de tænker på at tilføje det, du ønsker i CSS3. Indtil videre kan du nøjes med en af de ovennævnte.

Beslutningen om ikke at eksponere funktionen direkte kan virke mærkelig, men der er en god grund til det. Det er dyrt. Shrink-to-fit betyder formatering mindst to gange: Du kan ikke begynde at formattere et element, før du kender dets bredde, og du kan ikke beregne bredden uden at gå hele indholdet igennem. Desuden har man ikke brug for shrink-to-fit-elementet så ofte, som man måske tror. Hvorfor har du brug for ekstra div omkring din tabel? Måske er tabeltekst alt, hvad du har brug for.

Jeg ved ikke, i hvilken sammenhæng dette vil blive vist, men jeg tror, at CSS-style-egenskaben float enten left eller right vil have denne effekt. På den anden side vil det også have andre sideeffekter, f.eks. at tekst kan svæve rundt om den.

Ret mig dog venligst hvis jeg tager fejl, jeg er ikke 100% sikker, og kan i øjeblikket ikke selv teste det.

En CSS2-kompatibel løsning er at bruge:

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

Du kan også lade din div flyde, hvilket vil gøre den så lille som muligt, men du skal bruge en clearfix, hvis noget inden for din div er flydende:

.my-div
{
    float: left;
}