How to force a list to expand horizontal instead of vertically

I asked this question over on the JavaScript side but I realized I may not be seeing the forest through the trees so before I refine my question I thought it would be best to ask over here to see if I can confirm if what I am trying to do is impossible to do with css alone.

This is project is for the iPad.

What I am trying to make is a gallery that I can swipe from right to left. This gallery will consist of a grid of thumbnails that have different heights but all have the same width. The number of visible thumbnails varies depending on if you are looking at the gallery in portrait mode or landscape mode.

In landscape the grid is 2 X 6 in portrait the grid is 3 X 3.

The total number of images is unknown and will keep growing, so this needs to be fluid.

What I have right now is a parent container with a set height and width (it changes with screen orientation only) and overflow is set to hidden so anything that does not fit on screen is hidden.

The unordered list has a set max-height and width set to auto. Even though the list has an auto width and max-height, the height expands when I add more list items and I can not force the list to expand horizontally.

In order to do a left to right swipe, I need the list to expand horizontally.

Any ideas on how this can be done with CSS?

I need to make the width fluid for a CMS template so hard coding the width in the style sheet is not an option.

here is the mark-up so far:

<style type="text/css">

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

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

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

span {
	display:block;
	width:160px;
}
</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>

Hi,
Try adding white-space:nowrap; to your UL, that will stop your inline-block LIs from wrapping.

You can also do away with width:auto on the UL and height:auto on the LI, those are defaults and you don’t have to declare them. :wink:

The absolute positioning on the UL will cause it to shrinkwrap to the width of it’s contents when a width or a right offset is not declared. Have you tried just leaving the UL as an inflow block or is there some reason you need the AP to remove it from the flow.

Thanks for the tips, for this project white-space:nowrap; will not work as I want to preserve some of the rows and if I set the <ul> to no wrap the <li> will render all the thumbnails on one line, which sort of works but I would like to preserve the grid layout.

The point of setting absolute is so I can move the <ul> with the swipe gestures by adjusting the left positioning. I suppose I could use negative margins to accomplish the same thing but that just feels dirty…

I’m open to idea’s, I have studied other image gallery’s a and most of them seem to operate in this way so I’m just mimicking some of the things I have seen other people do, unfortunately none of the plug-ins will work because none of them will adapt to a fluid layout. I thought it might be faster to make my own then hack up some one else’s plug in.

EDIT to add:
Just removed the parent and the absolute positioning, no success the max height is still ignored. It appears that a child element will conform to the parent container width if no width is set and the max-height property is ignore. Unless I want to be updating this template every time a use adds an new thumbnail I am going to have to use JavaScript to set the width.