Archief - CSS: div width = content width

Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.

v1sioNz

Legacy Member
Misschien een rare titel maar ik wist het niet beter te omschrijven. Ik heb een donkerbruin vermoeden dat deze vraag al gesteld is geweest, maar kan er niets van terug vinden. Op google is er veel over te vinden, maar een echte oplossing ben ik tot dusver nog niet tegengekomen.

Hoe kan je de width van een div automatisch laten resizen naargelang zijn content? Dus feitelijk moet de div acteren net zoals een cel van een tabel dat doet.

Vaak wordt "display:table-cell" als oplossing aangeroepen (welke ook een oplossing is). IE zou IE niet zijn moest hij dit wel ondersteunen (wat dus maakt dat dit deze oplossing not-done is).

De enigste oplossing die ik mij kan bedenken is elke div waar ik dit nodig heb te omsluiten met (dit zou moeten werken in alle browsers?):
Code:
<table>
    <tr>
        <td>
            <div>Resized</div>
        </td>
    </tr>
</table>

Is er een andere oplossing? Ik vind dit maar een enorme "lelijke fix" aangezien een table toch niet echt dient als layout-hulpmiddel.

dJeez

Legacy Member
Float de div, dan gaat die sowieso de grootte van de content volgen (maw vb float: left; toevoegen op de stijl van de div).

v1sioNz

Legacy Member
Bedankt, dit is ook een oplossing maar dan zit ik met een ander probleem.

Om het even makkelijk te maken heb ik het HIER vlug "geschetst".

De gele box ziet er uit zoals ik wil. Deze is gefloat en de breedte is afhankelijk van de content. Graag wil ik de blauwe box net onder die gele box dus maak ik gebruik van "clear:left" op de blauwe box. Aangezien de groene box ook gefloat is, gaat de blauwe box (omwille van "clear:left") ook hier onder komen staan. (het bekijken van de source zal het wel duidelijk maken)

Hoe zou ik dit het best oplossen? Of beter... hoe moet ik mijn layout fatsoenlijk schikken om te krijgen wat ik wil?

Xavez

Legacy Member
Die float: left op je gele box weg doen
De clear: left op je blauwe box weg doen
Een float: left op je rooie box zetten
De margin-left van die rooie box gelijk maken aan de breedte van de groene box + eventuele spatie die je tussen de rooie en de groene box wilt houden
Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.
Terug
Bovenaan