Move scrollbar position by x amount of pixels

I have a fixed div size width. i'll denote this as x

I have a fixed div size height.

I want to add buttons to either side of the div allowing the user to navigate right i.e. moving x amount of pixels to the right, i.e. showing the next entry in the div.

Can anyone suggest a solution to this problem?

Here is my current html / css:

<div class="outer_container" style="overflow: scroll; overflow-y: hidden; width:577px; border-style:solid; border-width:5px; border-color:#578278;">
    <div class="inner_container" style="width: 10000px;">

<table>
    <tr>
        <td style=" width: 577px; ">
            <div style="text-align:left;  margin: 0px 10px 10px 10px; width:557px; ">
                <p>Add Comment to the Tesco Catalogue</p>
                <form class="comment_form" action="profile" method="post">
                    <textarea style="resize:none;" maxlength="250" rows="2" cols="65" placeholder="Enter your comment here..."></textarea>
                    <input type="submit" value="Submit"/>
                </form>
            </div>
        </td>
        <!-- do a for loop here to generate all other items -->
        <td style="width:577px;">
            <div style="text-align:left; padding: 5px 10px 5px 10px; margin: 0px 10px 10px 10px; width:567px; border-style:solid; border-width:1px; border-color:#578278;">
                <p class="comment_username"> User said at such a time</p>
                <p class="comment_comment"> Comment ......</p>
            </div>
        </td>
        <td style="width:577px;">
            <div style="text-align:left; padding: 5px 10px 5px 10px; margin: 0px 10px 10px 10px; width:567px; border-style:solid; border-width:1px; border-color:#578278;">
                <p class="comment_username"> User said at such a time</