„Išlendantis“ DIV

http://sum.lt/straipsniai/islendantis_div.php

DIV elementas, esanti kitame ir turintis daugiau turinio dažnai išlenda už ribų. Pateikiamas paprastas šios problemos sprendimo būdas su pavyzdžiais.

Situacija

Dažnai pasitaikanti situacija, kai viename išoriniame DIV elemente (pavadinkime jį didžiuoju) yra patalpinamas vidinis (mažesnis) DIV elementas su požymiu float (pavyzdyje žemiau — float:left). Vidiniojo elemento pritaikymas gali būti įvairus: svetainės turinys, trumpas puslapyje minimo objekto aprašymas, išnaša ir pan. Išorinio DIV tekstas apteka vidinį ir viskas yra labai gražu: 

 
border: 1px solid green;
margin: 3px;
float: left;
width: 50%;
background-color: white;
 
 
border: 1px solid black;
margin: 0 10px;
 

Elementum at tempus. Luctus lacus vestibulum class tristique per pellentesque. Hymenaeos at accumsan netus scelerisque ante pellentesque. Sodales ac dapibus nec molestie. Congue nibh blandit ut condimentum mi rhoncus. Interdum urna ridiculus sem litora. Aliquet netus scelerisque velit iaculis. Volutpat ante luctus ad vivamus. Tellus mi commodo etiam imperdiet matti semper.

Tekstas sukurtas atsitiktinio teksto generatoriumi.

Problema

Tačiau kai didžiojo DIV turinys yra per trumpas, mažasis išlenda apačioje: 

 
border: 1px solid green;
margin: 3px;
float: left;
width: 50%;
background-color: white;
 
 
border: 1px solid black;
margin: 0 10px;
 

Galimi variantai

Vienas iš variantų yra pridėti „išvalantį“ DIV elementą: 

 
border: 1px solid green;
margin: 3px;
float: left;
width: 50%;
background-color: white;
 
 
border: 1px solid black;
margin: 0 10px;
 
clear: both;

Arba kokį nors <br style="clear:both"/>.

Sprendimas

Tačiau yra gražesnis sprendimas, nereikalaujantis papildomų HTML elementų. Tiesiog reikia pridėti overflow: auto; didžiajam DIV: 

 
border: 1px solid green;
margin: 3px;
float: left;
width: 50%;
background-color: white;
 
 
border: 1px solid black;
margin: 0 10px;
 
overflow: auto;

Vua-lia! — Išorinio DIV aukštis gražiai išsitempia iki reikiamo dydžio!