.container { float: left; width: 30%; margin: 10px -2px 10px 2.5%; background: #edb; border: solid 1px #000; display: inline; position: relative; } .container div { margin: 5px; height: 140px; display: block; background: #eee; overflow: hidden; position: relative /* IE-win must have this */; } .img-left{ text-align: left; } #independent .img-left img { margin: 0 -140px 0 0; } .img-center { text-align: center; } #independent .img-center img { margin: 0 -70px; } .img-right { text-align: right; } #independent .img-right img { margin: 0 0 0 -140px; } * html #independent .img-right img { display: block /* fix the IE-win whitespace bug */; } /* offset from center */ #independent2 .img-left { text-align: center; } #independent2 .img-left img { margin: 0 -100px 0 -40px; } #independent2 .img-center { text-align: center; } #independent2 .img-center img { margin: 0 -70px; } #independent2 .img-right { text-align: center; } #independent2 .img-right img { margin: 0 -40px 0 -100px; }
IE/win can't handle negative margin totals that are larger than the element-size itself.
IE/Mac can only handle 'text-align: center', with variations.
[14.jul.2006]: revised caption-control and improved vertical fluidity of this test.