advanced code snippet search

We Recommend

CSS: The Definitive Guide CSS: The Definitive Guide
Provides you with a comprehensive guide to CSS implementation, along with a thorough review of all aspects of CSS 2.1. Updated to cover Internet Explorer 7, Microsoft's vastly improved browser, this new edition includes content on positioning, text wrapping (nowrap), lists and generated content, table layout, user interface, paged media, and more.

Posted By

hxseven on 08/14/06


Tagged

div iframe css box scrollable scrollbar


Versions (?)


Who likes this?

9 people have marked this snippet as a favorite

jonhenshaw
luman
panatlantica
smilylion
clapfouine
tavo
vali29
cidibee
monapdx


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.

Plain TextExpand 
  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.