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?
Oops sorry, actually I didn’t add a max-width to li. It does work nice, thanks!
Also for the “different matter”, actually it seems like your first solution solves that problem as well. For those who are too lazy to test the updated code, I’ve uploaded a demo here.
It seems like its working okay with margins set under pixels, but I’ll keep the whole pixel and % problems in mind.
Cool, glad that helped. The second solution makes the images scale with any browser movement, rather than just at a certain point, so it just depends on what behavior you want.