Posted By

hxseven on 08/14/06


Tagged

div iframe css box scrollable scrollbar


Versions (?)

Who likes this?

12 people have marked this snippet as a favorite

jonhenshaw
luman
panatlantica
smilylion
clapfouine
tavo
vali29
cidibee
monapdx
m4tik
SystemR
atulkransingh


Scrollable DIV-Box


 / Published in: CSS
 

URL: http://codedump.jonasjohn.de/snippets/scrollable-div-box.htm

Shows how to create a DIV box that is scrollable and looks like a IFRAME.

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3.  
  4. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  5. <head>
  6. <title>example page</title>
  7.  
  8. <style type="text/css" media="all">
  9.  
  10. body {
  11. font-family: Verdana;
  12. font-size: 90%;
  13. }
  14.  
  15. #scroll_box {
  16. border: 1px solid #ccc;
  17. height: 120px;
  18. width: 400px;
  19. overflow: auto;
  20. margin: 1em 0;
  21. }
  22.  
  23. </style>
  24. </head>
  25.  
  26. <body>
  27.  
  28. <div id="page">
  29.  
  30. <h1>Title</h1>
  31.  
  32. <div id="scroll_box">
  33. <p>
  34.  
  35. Put a long text in here. It will be scrollable.<br/>
  36. Put a long text in here. It will be scrollable.<br/>
  37. Put a long text in here. It will be scrollable.<br/>
  38. Put a long text in here. It will be scrollable.<br/>
  39. Put a long text in here. It will be scrollable.<br/>
  40. Put a long text in here. It will be scrollable.<br/>
  41. Put a long text in here. It will be scrollable.<br/>
  42.  
  43. </p>
  44. </div>
  45.  
  46. <p>
  47. This content follows after the scrollable box.
  48. </p>
  49.  
  50. </div>
  51.  
  52. </body>
  53. </html>

Report this snippet  

You need to login to post a comment.