Experiments with three images

Probably the biggest problem with liquid layouts is how to contain and display fixed width elements such as images and flash movies. Inherently with a liquid layout one never knows how wide a container will be. This can lead to situations where an image is wider than its container and breaks the layout.

These are attempts to show three images side by side in a variable width column, using CSS techniques adjust the layout.

Leave comments with the original post
More in the Sandbox

1. Three small images, side by side with padding and border styles applied

Pellentesque in felis quis tortor consectetuer condimentum. Phasellus nibh nibh, interdum sit amet, sagittis nec, cursus sit amet, dolor. Duis scelerisque tortor. Aenean nec turpis. Curabitur nulla mauris, gravida eu, ultrices id, aliquam nec, mauris.

Experiments with three images

1. Three small images, side by side with padding and border styles applied

2. Three small images in a table with LHS and RHS images touching the gutter

3. Three small images, floated left, right and text-aligned centrally

4. Three small images, positioned left, right and text-aligned centrally

5. Three small images separated by margins the same size as the text gutter