Scrollable Divs Nice thing in Css

by Sauravh Singh on 06/11/07 at 10:58 am

When creating a website, you may have a situation where you need to include far more content into a certain area than the design can really accommodate.
An easy way to accomplish this is to create a scrolling div area that will automatically scroll when there is
an overflow of content within the div. A scrollable div is used on the right to display all of the sites within a single community in a limited amount of space. it is not near as messy and is more search engine friendly. To recreate this effect, start by creating a normal div with all of the content you want to scroll within that div. To make the div display a scrollbar you must use the overflow element in the CSS.

Here is Example :

<——————– CSS —————–>

#scrollingdiv_auto {
color:#999999;
border: 1px solid #666666;
padding: 5px;
width: 300px;
height: 200px;
overflow:auto;
}

<——————– HTML —————–>
"<div id="scrollingdiv_auto">Your Scrolling content comes Here</div>"
<——————– Example Preview —————–>

Your Scrolling content comes Here
Your Scrolling content comes HereYour Scrolling content comes HereYour Scrolling content comes HereYour Scrolling content comes HereYour Scrolling content comes HereYour Scrolling content comes HereYour Scrolling content comes HereYour Scrolling content comes HereYour Scrolling content comes HereYour Scrolling content comes HereYour Scrolling content comes HereYour Scrolling content comes HereYour Scrolling content comes HereYour Scrolling content comes HereYour Scrolling content comes HereYour Scrolling content comes HereYour Scrolling content comes HereYour Scrolling content comes HereYour Scrolling content comes HereYour Scrolling content comes HereYour Scrolling content comes HereYour Scrolling content comes HereYour Scrolling content comes HereYour Scrolling content comes HereYour Scrolling content comes HereYour Scrolling content comes Here

Your Scrolling content comes HereYour Scrolling content comes HereYour Scrolling content comes HereYour Scrolling content comes HereYour Scrolling content comes Here

<——————– CSS —————–>

#scrollingdiv_scroll {
color:#999999;
border: 1px solid #666666;
padding: 5px;
width: 300px;
height: 200px;
overflow:auto;
}

<——————– HTML —————–>
"<div id="scrollingdiv_scroll">Your Scrolling content comes Here</div>"
<——————– Example Preview —————–>

Your Scrolling content comes Here
Your Scrolling content comes HereYour Scrolling content comes HereYour Scrolling content comes HereYour Scrolling content comes HereYour Scrolling content comes HereYour Scrolling content comes HereYour Scrolling content comes HereYour Scrolling content comes HereYour Scrolling content comes HereYour Scrolling content comes HereYour Scrolling content comes HereYour Scrolling content comes HereYour Scrolling content comes HereYour Scrolling content comes HereYour Scrolling content comes HereYour Scrolling content comes HereYour Scrolling content comes HereYour Scrolling content comes HereYour Scrolling content comes HereYour Scrolling content comes HereYour Scrolling content comes HereYour Scrolling content comes HereYour Scrolling content comes HereYour Scrolling content comes HereYour Scrolling content comes HereYour Scrolling content comes Here

Your Scrolling content comes HereYour Scrolling content comes HereYour Scrolling content comes HereYour Scrolling content comes HereYour Scrolling content comes Here

<——————– CSS —————–>

#scrollingdiv_xscroll {
color:#999999;
border: 1px solid #666666;
padding: 5px;
width: 300px;
height: 200px;
overflow-x:auto;
}

<——————– HTML —————–>
"<div id="scrollingdiv_xscroll">Your Scrolling content comes Here</div>"
<——————– Example Preview —————–>

Your Scrolling content comes Here
Your Scrolling content comes HereYour Scrolling content comes HereYour Scrolling content comes HereYour Scrolling content comes HereYour Scrolling content comes HereYour Scrolling content comes Here

Your Scrolling content comes HereYour Scrolling content comes HereYour Scrolling content comes HereYour Scrolling content comes HereYour Scrolling content comes Here

<——————– CSS —————–>

#scrollingdiv_yscroll {
color:#999999;
border: 1px solid #666666;
padding: 5px;
width: 300px;
height: 200px;
overflow-y:auto;
}

<——————– HTML —————–>
"<div id="scrollingdiv_yscroll">Your Scrolling content comes Here</div>"
<——————– Example Preview —————–>

Your Scrolling content comes Here
Your Scrolling content comes HereYour Scrolling content comes HereYour Scrolling content comes HereYour Scrolling content comes HereYour Scrolling content comes HereYour Scrolling content comes HereYour Scrolling content comes HereYour Scrolling content comes HereYour Scrolling content comes HereYour Scrolling content comes HereYour Scrolling content comes HereYour Scrolling content comes HereYour Scrolling content comes HereYour Scrolling content comes HereYour Scrolling content comes HereYour Scrolling content comes HereYour Scrolling content comes HereYour Scrolling content comes HereYour Scrolling content comes HereYour Scrolling content comes HereYour Scrolling content comes HereYour Scrolling content comes HereYour Scrolling content comes HereYour Scrolling content comes HereYour Scrolling content comes HereYour Scrolling content comes Here

Your Scrolling content comes HereYour Scrolling content comes HereYour Scrolling content comes HereYour Scrolling content comes HereYour Scrolling content comes Here