How To Create A Scrollable DIV Area With CSS (overflow property)

By SachinKRaj on December 19, 2009 in CSS, How To, Tips

CSS makes it possible to do such things in just quick manner which we cant accomplish with lots of javascript code or from html. See the magic of CSS property, overflow. Let’s create a div with scrollable content. Starting with css and move on to html and follwed by live example.

CSS:

HTML:



I am normal text and I am inside the scrolling div.


     
       Wow, I can be in any color or style.
       Notice I am in green color 
     
  


      
          This is big bold text
      
   

I am a link

It can have any type html code, like you do normally.

more text...

even more text...

and more text...

Example:

I am normal text and I am inside the scrolling div. Wow, I can be in any color or style. Notice I am in green color This is big bold text I am a link It can have any type html code, like you do normally. more text... even more text... and more text...

About SachinKRaj

Sachin is a web application developer, technology blogger and web addict! He has over 6 years of web development experience and he writes tutorials primarily focused on LAMP, Ajax, Api's, jQuery etc. He is usability expert and he always likes to share his knowledge with people.

View all posts by SachinKRaj →

Subscribe to our e-mail newsletter to receive updates.