basic image-control #2

controlling overflow in a fluid-width environment...

chaotic test page
#18
13.jul.2006
rev: 14.jul.2006

text-align:left|center|right and negative margins

text-align: left

text-align: center

text-align: right

fine-tuning demo – text-align:center and margin-variations – image is 141px wide

-40px/-100px

-70px/-70px

-100px/-40px

.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;
}