CSS - Minimum hoogte


Als je gebruik maakt van div's in je website kun je tegen een probleem aanlopen met de opgegeven hoogte bijvoorbeeld in combinatie met een achtergrondkleur of afbeelding.

Je hebt bijvoorbeeld een blok gemaakt met een div met een vaste breedte en hoogte van 200 pixels bij 200 pixels met hierin tekst. Het blok gebruik je vervolgens op meerdere pagina's, echter op de eerste pagina past de tekst precies in het blok maar op een ander moment wordt de tekst langer dan het blok met als gevolg dat de tekst buiten het blok valt.

Als de tekst dus langer wordt dan wordt het blok hier niet automatisch op aangepast omdat je immers een vaste hoogte hebt opgegeven in de CSS voor het betreffende blok. Om een voorbeeld van deze situatie te bekijken klik op onderstaande link (popup).

Demo

Dit soort problemen zijn als volgt op te lossen door het blok een minimum hoogte te geven. In dat geval zal het blok zich dan wel automatisch aanpassen aan de inhoud.

Demo

.laag {
        float:left;
        width: 90px;
        min-height:100px;
}