I am in the process of building a dynamically resizing image gallery for the ipad. I have an unordered list that is comprised of several thumbnail images along with a short description.

Eventually I am going to incorporate slide capabilities so the user can swipe left to right through the image gallery, because of this feature I need the extra images that don't fit within the view port to expand the unordered list to the right. The problem is I can not get the unordered list to expand horizontally, it will only expand vertically even though I have explicitly set a max height (using javascript).

Code so far:

Code:
<style type="text/css">

span {
	display:block;
	width:160px;
}

#content {
	display:block;
	position:relative;
	overflow: hidden;
	margin:0em 2.34em;
	text-align: left;
}

ul {
	position:absolute;
	top:0;
	left:0;
	margin:0;
	padding:0;
	width: auto;
	display:block;
	text-align:center;
	list-style: none outside none;
}

li {
	display:inline-block;
	padding:1.47em 0.78em 0.78em;
	text-align:center;
	height:auto;
	vertical-align: top;
}
</style>


<script type="text/javascript">
$(document).ready(function() {
	var articleY = $(window).height();
			
			
	$('#content').css({'height':articleY});
        $('#gallery').css({'max-height':articleY});
});
</script>

<div id="content">
  <ul id="gallery">
    <li><img /><span>text</span></li>
    <li><img /><span>text</span></li>
    etc...
  </ul>
</div>
The images have a set width of 162px.

Any ideas on how to get the unordered list to expand horizontally instead of vertically?