imagecaption

This image is positioned above left. To stay in a coherent concept we would have to float the table to the left and not just leave it as it's done at the moment. The enclosing div would have to have a height calculated that corresponds to the sum of all images in the table (=height of the table). This avoids using a clearing div and lets the content stay below the image. The enclosing div has two classes - one general and one specific: imageblock imageorient-2. The text-align property in the div might or might not stay (it's taken out in this example).

imagecaption

This image is centered above. For all modern browsers including IE 6 this has to be achieved by setting {margin: 0 auto;} for the imgtext-table. The enclosing div has two classes - one general and one specific: imageblock imageorient-0 and the text-align property to make it work with older browsers, IE5+ in particular. No height for the div needs to be calculated here as nothing is floated.

imagecaption

This image is positioned above right. The table has to be floated with right. The enclosing div would have to have a height calculated that corresponds to the sum of all images in the table (=height of the table). This avoids using a clearing div and lets the content stay below the image. The enclosing div has two classes - one general and one specific: imageblock imageorient-1. The text-align property in the div might or might not stay (it's taken out in this example).

This image is positioned below left. To stay in a coherent concept we would have to float the table to the left and not just leave it as it's done at the moment. The enclosing div would have to have a height calculated that corresponds to the sum of all images in the table (=height of the table). This avoids using a clearing div and lets the content stay below the image. The enclosing div has two classes - one general and one specific: imageblock imageorient-10. The text-align property in the div might or might not stay (it's taken out in this example).

imagecaption

This image is centered below. For all modern browsers including IE 6 this has to be achieved by setting {margin: 0 auto;} for the imgtext-table. The enclosing div has two classes - one general and one specific: imageblock imageorient-8 and the text-align property to make it work with older browsers, IE5+ in particular. No height for the div needs to be calculated here as nothing is floated.

imagecaption

This image is positioned below right. The table has to be floated right. The enclosing div would have to have a height calculated that corresponds to the sum of all images in the table (=height of the table). This avoids using a clearing div and lets the content stay below the image. The enclosing div has two classes - one general and one specific: imageblock imageorient-9. The text-align property in the div might or might not stay (it's taken out in this example).

imagecaption