The Smooth Div Scroll is great but for some reason the area no longer scrolls when I edit or remove the #makeMeScrollable or #makeMeScrollable div.scrollableArea * When I leave it as is it works. Which is a problem for customization.

and it won't work after I take the "*" out of div.scrollableArea *

If I edit the part with the

It's been frustrating figuring out why that part which is supposed to be editable not work at all.

Any help with this jquery would be helpful! Thanks in advance!

/* You can alter this CSS in order to give SmoothDivScroll your own look'n'feel */

/* Invisible left hotspot */
div.scrollingHotSpotLeft
{
    /* The hotspots have a minimum width of 75 pixels 
       and if there is room the will grow and occupy 10% 
       of the scrollable area (20% combined). 
       Adjust it to your own taste. */
    min-width: 75px;
    width: 10%;
    height: 100%;
    /* There is a big background image and it's used to 
    solve some problems I experienced in Internet Explorer 6. */
    background-image: url(../images/big_transparent.gif);
    background-repeat: repeat;
    background-position: center center;
    position: absolute;
    z-index: 200;
    left: 0;
    /*  The first cursor url is for Firefox and other 
        browsers, the second is for Internet Explorer */
    cursor: url(../images/cursors/cursor_arrow_left.cur), url(images/cursors/cursor_arrow_left.cur),w-resize;
}

/* Visible left hotspot */
div.scrollingHotSpotLeftVisible
{
    background-image: url(../images/arrow_left.gif);                
    background-color: #fff;
    background-repeat: no-repeat;
    /* Standard CSS3 opacity setting */
    opacity: 0.35; 
    /* Opacity for really old versions of 
       Mozilla Firefox (0.9 or older) */
    -moz-opacity: 0.35;
    /* Opacity for Internet Explorer. */
    filter: alpha(opacity = 35);
    /* Use zoom to Trigger "hasLayout" in 
       Internet Explorer 6 or older versions */ 
    zoom: 1; 
}

/* Invisible right hotspot */
div.scrollingHotSpotRight
{
    min-width: 75px;
    width: 10%;
    height: 100%;
    background-image: url(../images/big_transparent.gif);
    background-repeat: repeat;
    background-position: center center;
    position: absolute;
    z-index: 200;
    right: 0;
    cursor: url(../images/cursors/cursor_arrow_right.cur), url(images/cursors/cursor_arrow_right.cur),e-resize;
}

/* Visible right hotspot */
div.scrollingHotSpotRightVisible
{
    background-image: url(../images/arrow_right.gif);
    background-color: #fff;
    background-repeat: no-repeat;
    opacity: 0.35;
    filter: alpha(opacity = 35);
    -moz-opacity: 0.35;
    zoom: 1;
}

/* The scroll wrapper is always the same width and 
   height as the containing element (div). Overflow 
   is hidden because you don't want to show all of 
   the scrollable area.
*/
div.scrollWrapper
{
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 100%;
}

div.scrollableArea
{
    position: relative;
    width: auto;
    height: 100%;
}
#makeMeScrollable
{
width:100%;
height: 330px;
position: relative;
}
#makeMeScrollable div.scrollableArea *
{
position: relative;
float: left;
margin: 0;
padding: 0;
}

http://www.smoothdivscroll.com/

//^above link to the jquery I am talking about