Untitled

<!DOCTYPE html>
<html>
    <head>
        <style>
            #footwrap {                     /*scrolling footer box that contains the footer div (the contentent)*/
                background-color:#003366;   /*debug color (can be removed to make transparent)*/
                position:fixed;             /*locked to screen*/
                width:100%;                 /*make width of browser (keem this at 100% even of content is smaller)*/
                height:100px;               /*height of footer (user defianable)*/
                bottom:0px;                 /*locked to bottom of screen*/
                left:0;                     /*locked to left of screen*/
                overflow:hidden;            /*lets the content act like a box that can scroll but dont show scroll bars*/
            }
            #foot{
                width:1000px;               /*width of footer content (should be about roughfly the same size of the page content width)*/
                background-color:#ff0000;   /*debug color*/
            }
        </style>
        <script src="http://code.jquery.com/jquery-1.4.4.js"></script> <!--Include jQuery, Re host this on your own server once you move to production-->
    </head>
    <body>
        <div>Resize window so horisontal scroll bar appears, Then try scrolling</div>
        <p>___________________________________________________________________________________________________________________________</p>
        <div id="footwrap"><br /><div id="foot">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut dui nec massa gravida elementum. Aliquam tempor vehicula augue, tempus consectetur dui sollicitudin nec. Pellentes</div></div>

        <script>
            $(window).scroll(function () {                          //On window scroll event run function(){this}.
                $("#footwrap").scrollLeft(window.pageXOffset);      // see below to full explanation
            });
        </script>
    </body>
    <!--
    $("#footwrap").scrollLeft(window.pageXOffset);

    $("#footwrap")      = Select footwrap div using its ID
    .scrollLeft()       = The scroll left propertie (aka horizontal scroll in px)
    window.pageXOffset  = The window objects page X offset proptery value.(how far from the left is the horistonal scroll in px)
    -->
</html>