fluid images in one row

Question

I've stumbled into a tiny problem, which, for some reason, i have no idea how to solve. It might be one of those cases where it just looks simple, but impossible to implement. Here's the problem:

• i'd like to add a few images next to each other in one div. they need to have no spacing in between
• the div has a percentage width set so as it reaches some point i'd like those images to start to get smaller. What happens now is the images simply fall down vertically when the div can't contain them any longer.

The trick to get the images to scale down is by adding img { max-width: 100%; } in the css file, but that wouldn't work in this case. I'd like to ask if anyone knows an easy solution for this problem? I could try to set max-width for each image to a different number depending on their widths but i'm affraid the calculations will be off in some browsers (we all know how some browsers treat percentages with decimal places).

Thanks in advance

Non-working example:

<div style="width:40%"><img src="img1.jpg" /><img src="img2.jpg" /></div>
CSS: img { max-width: 100%; }

Comments: This is perfect for a single image so i'm looking for something as simple for multiple images.

Working example:

<div style="width:40%"><img src="img1.jpg" style="width:47.88%" /><img src="img2.jpg" style="width:52.12%" /></div>

Comments: calculating percentage widths is a pain and i'm not sure if it will even work in all cases.

Answer 1

I think you'll be fighting an uphill battle if you try to do this all within a single div. An easy, reliable solution is to use a table. You could also do it with a bunch of divs that approximate a table.

http://jsfiddle.net/chad/uSrYx/ - tables

http://jsfiddle.net/chad/uSrYx/1/ - divs masquerading as tables

http://jsfiddle.net/chad/uSrYx/2/ - a slightly different effect with inline-block divs inside of a white-space:nowrap container. Only possible if you know how many images are on each row beforehand

It all depends on how you want this to degrade in older browsers. Using a table will keep everything on the same line, but that line's width with not scale down. Using divs will stack the images vertically.