Advanced Search

Scrollable DIV-Box

/ Published in: CSS
Save to your folder(s)
Shows how to create a DIV box that is scrollable and looks like a IFRAME.

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  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>

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

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.