How to force a list to expand horizontal instead of vertically
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:
list-style: none outside none;
padding:1.47em 0.78em 0.78em;
var articleY = $(window).height();