Watercolor paintings by Demo Artist.

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.



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).


Credits:   Web design and animation by Denise deGoumois http://www.auntnini.com.


Your computer shows TODAY is:   .  ENJOY!


Floral | Scenes | People | Objects | Kidstuff | Bio Bits | Contact |

Go to top of page

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