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>