Overflow content di CSS akan membuat kita dapat mengatur sebuah tempat dengan ukuran yang sama untuk suatu content meskipun content itu terus bertambah. Tampilan yang dihasilkan akan seperti pada tag frame. Bedanya dengan frame adalah bahwa untuk overflow content masih pada halaman tersebut sedangkan pada frame content berada di halaman lain. Secara SEO, overflow lebih baik dibandingkan dengan frame.

Misal kita membuat code html sebagai berikut:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html>
<head>
<title>Overflow</title>
<style type=”text/css”>
#content
{
      overflow: auto;
      width: 200px;
      height: 100px
}
</style>
</head>
<body>
<div id=”content”>
Mahkotailah raja hidup mulia bagiHu.
Ingat mahkota duriMu, pimpin ke Kalvari.
Jangan lupa Getsemani, jangan lupa sengsaraNya
Jangan lupa cinta Tuhan, pimpin ke Kalvari.
</div>
</body>
</html>

Maka tampilannya akan seperti di bawah ini

  

Kita bisa melihat demonya juga di http://aris.proweb.asia/overflow1.html .

Jika kita set overflow=scroll maka akan ada stambahan scroll ke kanan seperti tampilan di bawah ini:

Kita bisa melihat demonya juga di http://aris.proweb.asia/overflow2.html .

Kunjungi www.proweb.co.id untuk menambah wawasan anda.

 

Overflow content di CSS