Creating a Scrolling DIV area

0

• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 

Enter your email address:

Never Spam

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.

It appears you are new around here. You may want to subscribe to my RSS feed or register for email updates. Thanks for visiting!