Problema con layout fluido

[SoWhat]

volevo realizzare delle pagine con dei div che si ridimensionassero al variare della risoluzione, allora ad esempio ho inserito questa linea nel mio foglio di stile:

div#foto{text-align:center;margin-bottom:2px;padding-right:20px;background:red;height:70%;width:40%;overflow:auto;float:left;padding-left:1px;}

ma il div non rimane all'interno della finestra, bensì prosegue come potete vedere qui

mentre l'effetto che vorrei ottenere è questo

Come posso fare?

[index]

Non ho capito il problema.

Potrebbe eliminare da quell'esempio quelle immagini spacca occhi?

Grazie.

[SoWhat]

Nel primo link, il div è settato con dimensioni percentuali e (almeno con il mio browser) invece di restare entro i margini della finestra del browser, li eccede, ignorando le dimensioni che ho regolato io.
Il secondo link è invece di un div settato con dimensioni in pixel, ed è l'effetto che vorrei ottenere con le dimensioni percentuali.