Watercolor paintings by Demo Artist.

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 :

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

.picbox { margin: 0; text-align: center; padding: 0; border:0; position: relative; float: left; width:300px; color:#000; background: #fff; display: table-cell; vertical-align: middle; horizontal-align: center; }

.picbox img { display: block; width: 85%; height: auto; margin: auto; padding:2px; }

.picbox p { display: table-cell; width: 100%; text-align:center;}

.picbox p + p { display: table-caption; caption-side: top; }

This sample demo page is indexCSS.html#top. See also index.htm (which features a Javascript slideshow), indexTable.html (experimenting with image sizing and positioning), and index.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 |

Ahem! Excuse us . . . if you see this message, your browser does not support Cascading Style Sheets. This site uses CSS.

Go to top of page