Div above footer is affecting the footer styling, how to fix this? - html

Question

I am trying to develop a Help me function for our users. For this purpose, I am trying to put a div right above my footer. But, my div styling is affecting the footer, and I am not able to figure out why.
The look I am trying to achieve -
How it looks when I try to implement -
My styling affects the footer styling.
Here is my html code
<div class="help-img pull-right">
<a href="https://google.com">
<img src="~/Content/images/icon-help.png?version=#buildVersion" />
</a>
</div>
<footer class="clearfix">
<div class="pull-left">
<span id="footerYear"></span> © VMS Web #ViewContext.Controller.GetType().Assembly.GetName().Version
</div>
<div class="pull-right">
VMS Web User Guide |
Terms of Use
</div>
</footer>
My CSS -
.help-img {
position: relative;
bottom: 50px;
margin-right: 28px;
}
Any help is appreciated. Thanks

Answer 1

You need to wrap your elements to be able to position them relatively. Or you can use flexbox layout model, which is more suitable in this case.
.wrapper{
display:flex;
flex-direction:column;
}
.help-img {
margin-right: 28px;
align-self:flex-end;
margin-bottom:5px;
background-color:#f1f1f1;
}
.clearfix{
display:flex;
justify-content:space-between;
background-color:#f1f1f1;
}
<div class="wrapper">
<div class="help-img pull-right">
<a href="https://google.com">
<img src="~/Content/images/icon-help.png?version=#buildVersion" />
</a>
Need Help? <strong>Click Here</strong>
</div>
<footer class="clearfix">
<div class="pull-left">
<span id="footerYear"></span> © VMS Web #ViewContext
</div>
<div class="pull-right">
VMS Web User Guide |
Terms of Use
</div>
</footer>
</div>