Horizontal scrolling div

I want to add a bit of creative flair to a new site.

I want a top fixed menu with a horizontal scrolling content underneath.

As the visitor clicks the links in the menu, I want the content underneath to scroll to the correct position.

I've got a basic version running but it's quite right, the content scrolls but is aligned left, I want it to centre in the browser window.

http://www.netc.pwp.blueyonder.co.uk/bake/

I'm looking for some help to get the content to centre in browser window.

Phil

here's the code I have from a demo I found

		<script type="text/javascript" charset="utf-8">
			$(document).ready(function() {
		       $("#banner a").bind("click",function(event){
		           event.preventDefault();
		           var target = $(this).attr("href");
		           $("html, body").stop().animate({
		               scrollLeft: $(target).offset().left,
					   scrollTop: $(target).offset().top
		           }, 1200);
		       });
			});
		</script>

Code (markup):

 

to center block:
width: 500px;
margin: 0px auto;

 

Thanks for your help, not sure to work that in.

I was expecting to have to achieve it by altering the script.

The scrolling content is styled by

		.panel {
			width: 600px;
			float: left;
			padding-left: 100px;
			padding-right: 1040px;
			margin-top: 100px;
			color:#FFF;
}

Code (markup):