Scroll Bars Inside a Div… No Iframe

Posted on
By Addam Driver

While working on a project for UPN, they wanted several items to “scroll”. I grew increasingly frustrated with the whole “Iframe” thing because they were cumbersome to create. So, with that being said, I ran this great CSS tag called “overflow”. When used properly, it will create scroll bars when it’s needed. Pretty Cool huh!?

Example CSS:

.floatbox {
  float: left;
  clear:both;
  width: 150px;
  height: 150px;
  overflow:auto;
  border:1px solid #6FC1EA;

}

 This will create a box that looks like this:

Some text here…
Some text here…
Some text here…
Some text here…
Some text here…
Some text here…

 As you can see there are NO SCROLL BARS…
This is that is looks like when I continue to add more text inside of the box:

Some text here…
Some text here…
Some text here…
Some text here…
Some text here…
Some text here…
Some text here…
Some text here…
Some text here…
Some text here…
Some text here…

 And we now have scrollage!!

 I hope this helps someone out there!

Tags: , ,

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

CSS Methods

HTML Goodies

JavaScript

mustache

node.js

The HTML Writers Guild IWA