Creating a Scrolling DIV area

At times when creating a site, you may encounter a situation where you need to include more content into DIV than the design is made to handle.

Maybe you want to include the latest news, blogs feeds, or RSS information, but you would like to keep it contained to a small section of the web page.

To do this you can create a scrolling DIV area that will automatically scroll when there is an overflow of content within the DIV. The effect looks much like an iFRAME, but is a far more search engine friendly and user friendly way of doing it.

To do this, start by creating a normal DIV with the content you want to scroll within it.

To make the DIV scroll automatically you must use the overflow element in the CSS. Here is what your style sheet would look like for this DIV area:

#exampleDIV {
  border: solid 2px #2895B8;
  background: #dadada;
  color: #666666;
  padding: 4px;
  width: 200px;
  height: 50px;
  text-align: left;
  overflow : auto;
}

By adding the “overflow: auto” to your styles, the DIV will scroll only when there is an overflow of data like this:

That’s it! Creating a scrolling DIV is just that easy.

Welcome Back!

Now is your chance to join our growing community! Be the first to know about great new articles like this one. Register for my Email Updates or RSS Feed today!