How to positioning an image between two div
11,634
Solution 1
Full css sample
.blue {
background: blue;
width: 500px;
height: 150px;
overflow: hidden;
}
.red {
background: red;
width: 500px;
height: 100px;
margin-top: 20px;
position: relative;
}
.image {
position: absolute;
bottom: -10px;
/* half of image height */
right: 10px;
/* right space */
}
.image img {
display: block;
width: 100px;
height: 20px;
background: green;
}
<div class="blue">
<div class="red">
<div class="image">
<img src="" alt="" />
</div>
</div>
</div>
Solution 2
Hey now used to this
.parent{
background:blue;
width:500px;
height:150px;
overflow:hidden;
}
.child{
background:red;
width:500px;
height:100px;
margin-top:20px;
position:relative;
}
.child img{
position:absolute;
bottom:-25px;
right:6%;
width:200px;
height:50px;
}
.parent{
background:blue;
width:500px;
height:150px;
overflow:hidden;
}
.child{
background:red;
width:500px;
height:100px;
margin-top:20px;
position:relative;
}
.child img{
position:absolute;
bottom:-25px;
right:6%;
width:200px;
height:50px;
}
<div class="parent">
<div class="child">
<img src="http://fakeimg.pl/250x100/">
</div>
</div>
Author by
Jayyrus
I'm an Italian Software Engineer. I like very much to learn and study new technologies
Updated on June 22, 2022Comments
-
Jayyrus almost 2 years
i have to positioning an image between the bottom of two div, one inside another like:
The code for this example is:
<div style="background:blue;width:500px;height:150px;overflow:hidden;"> <div style="background:red;width:500px;height:100px;margin-top:20px;"> //DOES IMAGE GOES HERE? </div> </div>
I know that with position absolute i could positioning the image there.. but i don't like that kind of positioning.. is there another way? Thanks!!!