Here are three images. The first is floated left; the third is floated right, leaving the second centered between them. If the browser window gets too narrow, the images start to drop underneath one another. Ick! Can we prevent that?
Of course! If we give the divs percentage widths, we'll allow them to shrink and expand along with their enclosing column. By placing the images as background of the divs and using a bit of CSS, we can ensure they get cropped as needed — depending on the image content, we can specify the crop to occur on the left, right, or both sides. We lose some of the images, but the layout remains solid. Nifty!
(In this example, the colored area under each div highlights its width.)
At this point, I'd like to get the technique to work with all crops (left-crop, right-crop, or both sides) and with all image positions within the div (left-aligned, right-aligned, and perhaps centered.) Unfortunately, some of these combinations have me stumped. Here, the problem is with the "Micol, Shannon and Ellen" image.
I have a hunch the solution lies in two embedded elements, but the answer eludes me. Won't you help? If you see a solution, please let me know. This technique will greatly help in designing liquid pages that squash much further than expected. Thanks!
