Example: http://jsfiddle.net/AtbFR/2.
I'm currently working on a dynamic liquid layout that consists of two columns on either side. The main container is set to 100% width with margins for padding, creating a flexible design inside the columns.
When resizing the browser window, more images are displayed as the width increases. However, I need to make a slight adjustment. Instead of always showing a variable 'X' number of images, I want it to display X + (1/3) images. For instance, in a very large window, it should show 10 full-width images and only 1/3 of the last image.
#list {
width:80%;
border:1px solid black;
margin: 0 auto;
}
#list ul {
height:40px;
overflow:hidden;
}
#list ul li {
display:inline;
}