basic image-control #1

controlling overflow in a fluid-width environment...

chaotic test page
#18
12.jul.2006
rev: 20.mar.2008

floating and centering

float: left

text-align: center

float: right

absolute positioning

left: 0

left: 50% with margin offset

right: 0

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

#independent .img-left img {
float: left; 
margin: 0 -140px -100px 0;
}

#independent .img-center {
text-align: center;
}

#independent .img-center img {
margin: 0 -70px;
}

#independent .img-right img {
float: right; 
margin: 0 0 -100px -140px;
}

#independent2 .img-left img {
position: absolute; 
top: 0; 
left: 0;
}

#independent2 .img-center img {
position: absolute; 
top: 0; 
left: 50%; 
margin-left: -70px;
}

#independent2 .img-right img {
position: absolute; 
top: 0; 
right: 0;
}