This is a demo site called "art demo." Trying an all CSS layout is tricky here. Worse than differences in image sizes, is great variations in their "aspect ratios." Images are herein resized (generally not a good idea) in picBox divs for demo purposes only. See floral/index.html for alternate approach.

This was to be original proposal for JM, using her images herein displayed for demo purposes only. See floral/index.html for alternate approach.

Demo Artist

watercolors

Caption

Caption

Caption

Caption

Caption

Caption

For this layout, we used :

.colleft { float: left; width: 300px; margin: auto; text-align: left; padding: 0; border: 0; position: relative; overflow: hidden; }
.colLwide { float: left; width: 400px; margin: auto; text-align: left; padding: 0; border: 0; position: relative; overflow: hidden; }
.colmiddle { float: left; width: 300px; margin: auto; text-align: center; padding: 0; border: 0; position: relative; overflow: hidden; }
.colright { float: right; width: 300px; margin: auto; text-align: right; padding: 0; border: 0; position: relative; overflow: hidden; }
.colRwide { float: right; width: 400px; margin: auto; text-align: right; padding: 0; border: 0;position: relative; overflow: hidden; }

#container { color:#42557a; background:#fff; width: 900px; margin: auto; text-align: center; padding: 0; border: 0; position: relative; overflow: hidden;}

.picbox3Tall { margin: 0; text-align: center; padding: 0; border:0; position: relative; float: left; width:300px; height: 400px; display: table-cell; vertical-align: middle; horizontal-align: center;}

.picbox2Wide { margin: 0; text-align: center; padding: 0; border:0; position: relative; float: left; width:400px; height: 300px; display: table-cell; vertical-align: middle; horizontal-align: center; }

.picbox3Tall img { display: block; width: 65%; height: auto; margin: auto; padding: 2px auto; border: solid 4px white; }

.picbox2Wide img { display: block; width: 70%; height: auto; margin: auto; padding: 0; border: solid 4px white; }

.rowTall { margin: auto; overflow: hidden; width: 900px; height: 400px; }

.rowWide { margin: auto; overflow: hidden; width: 900px; height: 300px; }

.text { display: block; font: 11px normal Verdana, Arial, Helvetica, sans-serif; text-align:left; padding: 2px; margin: 2px auto; } /*== for small CAPTIONS ==*/

#textbox { padding: 10px; color: #000; background: #fff; overflor: hidden; } /*== for large text blocks ==*/

#textbox p { text-align: left; margin: 1em 20px 0 20px; }

#textbox p + p { text-align: left; margin-top: 0; text-indent: 1.5em; }

MUCH TOO MUCH DIV NESTING!

This sample demo page is floral/indexRow.html; see floral/index.html. See also indexCol.html (which does not use rows), index.htm (which features a Javascript slideshow), indexTable.html (experimenting with image sizing and positioning), and indexCSS.html (another CSS layout).