So I'm trying to make a list of images fluid so they'll resize when the window is resized.

Take this code for example:
HTML Code:
		<div id="wrapper">
			<ul>
				<li class="item"><img src="img/f-adler.jpg"></li>
				<li class="item"><img src="img/f-holmes.jpg"></li>
				<li class="item"><img src="img/f-moriarty.jpg"></li>
				<li class="item"><img src="img/f-mycroft.jpg"></li>
				<li class="item"><img src="img/f-watson.jpg"></li>
				<li class="item"><img src="img/f-winter.jpg"></li>
			</ul>
		</div>
Code:
ul li{
	display: inline;
	float: left;
	margin: 1px 1px;
}

img {
	max-width: 100%;
}

#wrapper {
	max-width: 960px;
	margin: 0 auto;
}
Demo

So you can see I have the img element set to "max-width: 100%;" so it will resize appropriately when its container shrinks. However, the images only resize when the browser window width is smaller than the image width. This actually isn't even working on the latest version of Firefox for some reason... but it's working in Chrome so it would be nice if someone could explain why that is too.

Anyway, I want it so that once the window size is resized small enough, the #wrapper will start shrinking. Instead of dropping the images into one column, I want them to start shrinking relative to the window size. How can this be done?

I see it being done on one of A List Apart's demo here, but I can't seem to figure out how they do it: http://d.alistapart.com/responsive-w...-flexible.html