This will be 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."
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 indexRow.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).
Credits: Web design and animation by Denise deGoumois http://www.auntnini.com.
Your computer shows TODAY is: . ENJOY!
| Floral | Scenes | critters | Objects | Illustration | Bio Bits | Contact |
Go to top of pageAhem! Excuse us . . . if you see this message, your browser does not support Cascading Style Sheets. This site uses CSS.