issue with jquery responsive content slider
<p>I am trying to create a responsive content slider.
I have got it to work in firefox but in all other browsers that I have tested (ie 8 and 9, and chrome) the element that I am trying to slide either doesnt slide at all, or slides all the way off the screen. Below is the code (I have only added functionality to the 'next' button)
Am I missing something really obvious here? 
Alternaively does anyone know of any decent responsive content sliders that use % width's rather than fixed widths?
many thanks,
Clay.</p>

<pre><code>    &lt;!DOCTYPE HTML&gt;
&lt;html&gt;
&lt;head&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt;
&lt;title&gt;Untitled Document&lt;/title&gt;
&lt;style type="text/css"&gt;
.contentSlider_content {float:left; display:block; background-color:#0F0;}
#contentSlider_controlPrev {float:left;}
#contentSlider_controlNext {float:right;}
&lt;/style&gt;
&lt;script src="http://code.jquery.com/jquery-1.7.min.js" type="text/javascript"&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div id="contentSlider_mainContainer" style="width:100%; height:100px; overflow:hidden; border:1px solid #ccc; position:relative;"&gt;
    &lt;div id="contentSlider_contentContainer" style="position:absolute; top:0px; height:100px; background-color:#F00;"&gt;
        &lt;div class="contentSlider_content" id="content1"&gt;asdasdsad&lt;/div&gt;
        &lt;div class="contentSlider_content" id="content2"&gt;asdasdsad&lt;/div&gt;
        &lt;div class="contentSlider_content" id="content3"&gt;asdasdsad&lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
&lt;div id="contentSlider_controlContainer"&gt;
    &lt;div id="contentSlider_controlPrev"&gt;prev&lt;/div&gt;
    &lt;div id="contentSlider_controlNext"&gt;next&lt;/div&gt;
&lt;/div&gt;
&lt;script type="text/javascript"&gt;
    $(document).ready(function() {
        var n = $(".contentSlider_content").length;
        var sliderContWidth = $('#contentSlider_mainContainer').width();
        var sliderContentContWidth = sliderContWidth * n;
        $('.contentSlider_content').width(sliderContWidth);
        $('#contentSlider_contentContainer').width(sliderContentContWidth);

        $('#contentSlider_controlNext').click(function(){
            $('#contentSlider_contentContainer').animate({right: '+='+sliderContWidth},2000);
            })
    });
&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>
