Internet Explorer Logo

Scroll Bars Inside a Div... No Iframe


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!?


Share

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!