Floating alongside a variable-width image - html

Question

Is there a simple way in CSS to position a number of images—stacked vertically—on the right) of a variable-sized image. The variable-sized image has a max-width defined that should be relative to the size of the browser window (i.e. it should be as big as possible to not fall off the screen, but not bigger than the actual image pixel dimensions). To make this more difficult, the markup is such that all <img>s are listed as equals, i.e., the images to appear on the right are not in a separate container.
Using a markup like the following, the size of each image is about equal.
<ul>
<li><img/></li> <!-- the big image -->
<li><img/></li>
<li><img/></li>
etc...
</ul>
By request, in a jsFiddle: http://jsfiddle.net/2p9gR/
It would be nice to do this in pure CSS(3), I don't need to support any browsers except my own (the latest Chrome).
Oh. And I will accept "no" for an answer, if it is the truth.

Answer 1

given your picture I have come up with the following solution:
HTML
<div class="container">
<div class="main-image"><img src="http://lorempixel.com/800/800/sports/1/" /></div>
<ul class="small-image-list">
<li><img src="http://lorempixel.com/120/120/sports/2/" /></li>
<li><img src="http://lorempixel.com/120/120/sports/3/" /></li>
<li><img src="http://lorempixel.com/120/120/sports/4/" /></li>
<li><img src="http://lorempixel.com/120/120/sports/5/" /></li>
</ul>
</div>
CSS
.container {padding-right:150px;}
.container .main-image {width:100%; float:left;}
.container .main-image img {width:100%; max-width:800px; max-height:800px;}
.small-image-list {list-style:none; margin:0 -150px 0 0; padding:0; width:120px; float:right;}
.small-image-list li {width:100%; overflow:hidden; padding-bottom:10px;}
#media all and (min-width: 950px) {
/*this is optional if you want the images to stick left when the page is over 950px;*/
.container {padding:0;}
.container .main-image {width:800px;}
.small-image-list {margin:0 0 0 30px; float:left;}
}
Example
Delete the media query if you want the large gutter
EDIT
Given the need for it all to be in a list you can try this:
HTML
<ul class="list">
<li><img src="http://lorempixel.com/800/800/sports/2/" /></li>
<li><img src="http://lorempixel.com/120/120/sports/3/" /></li>
<li><img src="http://lorempixel.com/120/120/sports/4/" /></li>
<li><img src="http://lorempixel.com/120/120/sports/5/" /></li>
</ul>
CSS
.list {list-style:none; padding:0 150px 0 0; margin:0;}
.list li {width:120px; float:right; padding:0; display:block; overflow:hidden; margin-right:-150px;clear:right; display:block;}
.list li:first-child {width:100%; float:left; margin:0; padding:0;}
.list li:first-child img {width:100%; max-height:800px; max-width:800px;}
List Example

Answer 2

Here is a partial solution. I needed to consider two cases that depend on the aspect ratio of the large image, portrait and landscape.
Case 1 - Portrait
<ul class="portrait">
<li class="first">
<img src="http://placekitten.com/300/1000" />
</li>
<!-- the next two images should 'float' right of the first one -->
<li>1
<img src="http://placekitten.com/800/600" />
</li>
<li>2
<img src="http://placekitten.com/800/560" />
</li>
</ul>
ul.portrait {
list-style: none;
border: 1px solid blue;
margin: 0;
padding: 0;
float: left;
}
ul.portrait li {
border: 1px dotted red;
width: 120px;
float: right;
clear: right;
margin-left: 30px;
}
ul.portrait li img {
width: 100%;
}
ul.portrait li.first {
float: left;
width: auto;
border: 1px dashed blue;
margin: 0;
}
ul.portrait li.first img {
vertical-align: top;
height: 100%;
max-height: 800px;
}
Case 2 - Landscape
<ul class="landscape">
<li class="first">
<img src="http://placekitten.com/1000/500" />
</li>
<!-- the next two images should 'float' right of the first one -->
<li>1
<img src="http://placekitten.com/800/600" />
</li>
<li>2
<img src="http://placekitten.com/800/560" />
</li>
<li>3
<img src="http://placekitten.com/800/560" />
</li>
<li>4
<img src="http://placekitten.com/800/560" />
</li>
<li>5
<img src="http://placekitten.com/800/560" />
</li>
<li>6
<img src="http://placekitten.com/800/560" />
</li>
</ul>
ul.landscape {
list-style: none;
border: 1px solid blue;
margin: 0;
padding: 0;
float: left;
}
ul.landscape li {
border: 1px dotted red;
width: 120px;
float: right;
clear: right;
margin-left: 30px;
}
ul.landscape li img {
width: 100%;
}
ul.landscape li.first {
float: left;
width: auto;
border: 1px dashed blue;
margin: 0;
}
ul.landscape li.first img {
vertical-align: top;
width: 100%;
max-width: 600px;
}
It is possible to get the images appearing in the correct configuration, bit there are some limitations.
Since floats are being used, as you make the screen more narrow, the right hand thumbnails will eventually stack below the large image. This suggests specifying a min-width for the parent ul containing block.
See Fiddle: http://jsfiddle.net/audetwebdesign/rsqW3/
The gist of the problem is in the rule for the large image. In the portrait case, you need to specify height: 100% and max-height: 800px and for the landscape case, you need to specify width: 100% and max-width: 600px. You can't quite make this distinction using CSS alone. The calc() value may be of some help but it is not yet widely supported.