Scrollbars:

(SOURCE:  http://www.tutorialspoint.com/css/css_scrollbars.htm)

There may be a case when an element's content might be larger than the amount of space allocated to it. For example given width and height properties did not allow enough room to accommodate the content of the element.

CSS provides a property called overflow which tells the browser what to do if the box's contents is larger than the box itself. This property can take one of the following values:

Value	Description
visible	Allows the content to overflow the borders of its containing element.
hidden	The content of the nested element is simply cut off at the border of the containing element and no scrollbars is visible.
scroll	The size of the containing element does not change, but the scrollbars are added to allow the user to scroll to see the content.
auto	The purpose is the same as scroll, but the scrollbar will be shown only if the content does overflow.

Put this in the custom CSS...

Code:

.scroll{
   display:block;
   border: 1px solid red;
   padding:5px;
   margin-top:5px;
   width:300px;
   height:50px;
   overflow:scroll;
   }
.auto{
   display:block;
   border: 1px solid red;
   padding:5px;
   margin-top:5px;
   width:300px;
   height:50px;
   overflow:auto;
   }

(Change the width and height to whatever suits your profile and content of course.)


Put this html code on the edit profile page, where ever you want the scroll boxes to show up on your profile...

Code:

<p>Name of scroll box section:</p>
<div class="scroll">
Put whatever ever you want to go into your scroll box here.
</div>
<br />
<p>Second scroll box section name:</p>
<div class="auto">
Put whatever you want in this section for your scroll box. If there is an overflow in
an element box. This provides your horizontal as well as vertical scrollbars.
</div>