I am facing an issue with a footer div that contains various other elements, one of which is an image that exceeds the height of the footer container. The image is not displaying completely as it is being cut off by the parent div (footer).
My goal is to achieve this with two specific criteria:
- The height of the footer should remain unchanged and not expand to accommodate the taller image.
- All elements within the footer should align at the bottom.
Here's what I have tried so far, along with the code on JSFiddle
HTML
<div class="wrapper">
<div style="height: 100px; width: 80%; background: white;">BODY</div>
<div class="footer">
<div class="block-foot-social">
<img src="http://placehold.it/10x10" />
<img src="http://placehold.it/10x10" />
<img src="http://placehold.it/10x10" />
<img src="http://placehold.it/10x10" />
<img src="http://placehold.it/10x10" />
</div>
<div class="block-foot-contact">
<span>1-888-555-5555</span> | <span><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="8fdceee3eafccfcaf7eee2ffe3eaa1ece0e2">[email protected]</a></span>
</div>
<div class="block-foot-icon">
<a href="#">
<img src="http://placehold.it/80x80" />
</a>
</div>
</div>
</div>
CSS
.wrapper {
height: 300px;
background: blue;
}
.footer {
clear: both;
height: auto;
width: 100%;
overflow: auto;
background: green;
position: relative;
}
.block-foot-contact, .blook-foot-icon, .block-foot-social {
float: left;
margin: 6px;
overflow: auto;
}
.block-foot-icon {
position: absolute;
background: red;
overflow: visible;
bottom: 0;
right: 0;
width: 150px;
}
I attempted removing overflow: auto from .footer, but this caused the collapse of the footer div and disrupted horizontal alignment. How can I resolve this issue? Thank you for your assistance.