Add Scroll Areas to WordPress Posts

I wanted to post some codes to several posts and set out to find ways to include longer code snippets on WordPress posts. Here are the steps I took to enable scrolling area for code snippets:

1. Go to your WordPress theme editor and either enable external style.css if not already enabled. I use tiga theme and had to enable the external style sheet.

2. Add the following code snippet to the style.css of your current theme

div.scroll {
  height: 200px;
  width: 300px;
  overflow: auto;
  border: 1px solid #666;
  background-color: #ccc;
  padding: 8px;
}

3. Then create a new post and paste the following in HTML mode

<div>
<p>This is a scrolling are created with the CSS property overflow.</p>
<p>
<span style="color: red;">This is red color</span>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh.</p>
<p>This is a normal paragraph.
<span style="font-weight: bold; font-size: 22px;">This is big bold text</span>
</p>
<p>This scrolling are can contain normal html like <a href="index.php">link</a></p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh.</p>
</div>

�

Reference:

http://www.domedia.org/oveklykken/css-div-scroll.php