I have two columns, both 50% of the screen-width. The left column is filled with text, the right column has an image that scales to the height of the text. Another image is placed over this first image, positioned in the bottom right corner. Even if the screen-width exceeds the image-width (and whitespace appears to the right of the image), the second image should stay aligned to the bottom right corner of the first one.
The setup you can see in the code below works in browsers other than Firefox. In Firefox, the second image is positioned as far right as possible, up to the original width of the first image. I think I've narrowed it down to the 100% height I give .image div, if I use a fixed height (i.e. 400px), the second image is aligned correctly. I need the percentage height though, to let the first image scale to the text height.
.wrapper {
overflow: hidden;
position: relative;
}
.text {
width: 50%;
position: relative;
}
.image {
width: 50%;
position: absolute;
left: 50%;
top: 0;
bottom: 0;
}
.image div {
position: relative;
display: inline-block;
vertical-align: top;
height: 100%;
max-width: 100%;
overflow: hidden;
}
.image div:after {
content: url("https://vignette1.wikia.nocookie.net/uncyclopedia/images/6/67/Marvin_the_martian.jpg");
display: block;
position: absolute;
bottom: 0;
right: 0;
width: 100px;
height: 120px;
}
.image>div>img {
display: block;
height: 100%;
width: auto;
}<div class="wrapper">
<div class="text">
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vel enim vulputate, luctus dolor vel, efficitur ante. Maecenas eget massa eu mi varius posuere vel mattis ante. Cras non fermentum sapien. Nunc sollicitudin nisi a posuere commodo. Fusce
tincidunt mi velit, in hendrerit dolor cursus et. Nam laoreet laoreet varius. Aliquam ut elit at elit ultricies iaculis vitae at purus. Pellentesque massa mi, ultricies elementum consequat sit amet, aliquam vitae sem. Nulla tempus nec augue non
lacinia. In hac habitasse platea dictumst. Sed quis rhoncus urna, lobortis bibendum sapien. Morbi accumsan commodo malesuada. Praesent porta tortor sed tristique dignissim. Maecenas et urna sit amet tortor semper commodo at vitae lectus. Nullam
imperdiet viverra sem, pellentesque sagittis ipsum pellentesque a. Mauris rutrum nunc id lectus commodo rhoncus.</p>
<p>Etiam mollis massa id lorem rhoncus venenatis. Donec lacinia orci lacus, ac auctor augue vehicula vitae. Cras dignissim, augue vitae hendrerit cursus, enim velit lacinia tellus, sit amet sollicitudin dui mauris eget tortor. Donec eu nulla a est interdum
aliquet. Praesent et lectus interdum, malesuada felis sed, sagittis est. Pellentesque in accumsan diam. Nam tristique porttitor tortor. In rutrum tellus nisi, id condimentum tellus fringilla ut.</p>
<p>Etiam mollis massa id lorem rhoncus venenatis. Donec lacinia orci lacus, ac auctor augue vehicula vitae. Cras dignissim, augue vitae hendrerit cursus, enim velit lacinia tellus, sit amet sollicitudin dui mauris eget tortor. Donec eu nulla a est interdum
aliquet. Praesent et lectus interdum, malesuada felis sed, sagittis est. Pellentesque in accumsan diam. Nam tristique porttitor tortor. In rutrum tellus nisi, id condimentum tellus fringilla ut.</p>
</div>
<div class="image">
<div>
<img src="https://nssdc.gsfc.nasa.gov/planetary/image/saturn.jpg" />
</div>
</div>
</div>You can see how it works in Codepen.
Any help would be appreciated.