The div above the footer seems to be interfering with the styling of the footer. Is there a solution to

I am currently working on implementing a Help functionality for our users. In order to do this, I have placed a div right above my footer. However, I am facing an issue where the styling of my div is affecting the footer in ways that I cannot figure out.

This is the desired look that I am aiming for - https://i.sstatic.net/7Pjuk.png

Unfortunately, when I try to implement it, this is how it looks -

https://i.sstatic.net/l0nVg.png

The styles applied to my div seem to be interfering with the footer styling.

Here is the HTML code snippet:

<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> &copy; <a href="https://viacommediaservices.visualstudio.com" target="_blank">VMS Web @ViewContext.Controller.GetType().Assembly.GetName().Version</a>
    </div>
    <div class="pull-right">
        <a href="~/content/help/VMSWeb One Sheet.pdf" target="_blank">VMS Web User Guide</a> |
        <a href="javascript:void(0)" onclick=";">Terms of Use</a>
    </div>
</footer>

This is the CSS being applied:

.help-img {
    position: relative;
    bottom: 50px;
    margin-right: 28px;
}

Any assistance or suggestions would be greatly appreciated. Thank you

htmlcssdom

Answer №1

To properly position your elements, you must enclose them in a wrapper with relative positioning or utilize the flexbox layout model for better results.

.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> &copy; <a href="https://viacommediaservices.visualstudio.com" target="_blank">VMS Web @ViewContext</a>
      </div>
      <div class="pull-right">
          <a href="~/content/help/VMSWeb One Sheet.pdf" target="_blank">VMS Web User Guide</a> |
          <a href="javascript:void(0)" onclick=";">Terms of Use</a>
      </div>
  </footer>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What are some clever ways to outsmart bootstrap rows?

Trying to find a way to work around Bootstrap rows. I have multiple col-..-.. items that I need to fit into one row, but modifying 8 complex .js files is not an option for me - and they refer to the children of the div I used as a bootstrap row. HTML manip ...

htmlcsstwitter-bootstrap

What is the best way to present a specific row layout using HTML and CSS?

Can someone assist me in creating rows of links in html+css with a specific layout? The desired format should follow this structure: (Psuedocode) <body class="class_with_minmaxwidth_set_in_css"> <div class="container"> <div class ...

htmlcss

Creating an interactive map on an image using HTML and drawing circles

I've been experimenting with drawing circles on images using the map property in HTML. I have an image set up, and when clicking on the image in JavaScript, I'm adding the area coordinates for the map property. However, I keep encountering a null ...

javascripthtmlimagedictionary

Problem with CSS Classes Styling

Having an issue with CSS in Windows Notepad: <!DOCTYPE html> <html> <head> <title>UniqueScience</title> <style> #title { display: block; ...

htmlcssnotepad

Having difficulty adjusting the StartIcon margin within the MUI Button example, unable to override its values

Currently, I am facing an issue with the Button component in Material UI. Specifically, I am working with a Button that contains a StartIcon. Despite trying to modify the default margin provided by the StartIcon CSS, I have been unsuccessful so far. https: ...

htmlcssreactjsmaterial-ui

Setting an action when clicking on a slice of a Doughnut chart using Chart.js

I have been working on integrating chart.js into my Django Project, and so far it has been going smoothly. I successfully created a doughnut chart with two slices. Now, I am trying to implement separate actions for each slice when clicked, such as redirect ...

javascriptpythonhtmldjangochart.js

Automatically numbering table columns with custom language localization in JavaScript using Jquery

Is there a method to automatically number table data in a local or custom language? As a Bengali individual, I have figured out how to automatically number the first data of each row using css and js. However, I am uncertain about how to implement custom n ...

javascripthtmljquerycss

What is the best way to extract HTML using selenium.webdriver in Python?

Appreciate your attention, and please excuse any errors in my English. I am currently attempting to retrieve HTML from . The process involves entering some text into an input box and clicking a button, which triggers the following actions: Load the Yaho ...

javascriptpythonhtmlselenium

displaying a confirmation alert upon unchecking a checkbox using javascript

I am trying to implement a feature where a message saying "are you sure?" pops up when the user tries to uncheck a checkbox. If they choose "yes", then the checkbox should be unchecked, and if they choose "no" it should remain checked. I'm new to Java ...

javascripthtml

Creating a responsive layout for displaying products using CSS and HTML

I have a project that requires me to showcase products in a specific manner while being responsive. Here's what I want to accomplish: Based on your opinion and experience, what method do you recommend using to achieve this? Should I use divs, tables, ...

htmlcsslayoutresponsive-design

Tips for applying CSS styles to the active page link

Check out the code below: Is there a way to assign a specific class to the current page link so that the mouse cursor will display as default rather than changing to a hand icon? I'm looking for a solution where I can apply a class to the active lis ...

javascriptjqueryhtmlcss

What is causing my jQuery to only impact the initial item in my iron-list?

How can I create a toggle effect for the left border of an iron-list entry in Polymer when clicking on it? I found some jQuery code that adds the border to the first entry clicked, but I need help extending this functionality to apply to all list entries ...

jqueryhtmlcsspolymer

How can I change the "Return" button on the iOS keyboard to a "Next" button using jQuery or JavaScript?

Currently, I am developing an HTML application and working on implementing it for IOS devices such as the IPAD. Within my application, there are multiple text boxes. Whenever a user clicks on a text box to input text, the keypad appears. On this keypad, ...

javascriptjqueryhtmlios

Is it permissible for H2 heading to resemble H1 visually, and vice versa, in compliance with WCAG guidelines?

My expertise lies in Accessibility testing. Currently, we are dealing with Two headings <h1 class="CssPropertywithSmallFontSize">Heading One</h1> <h2 class="CssPropertywithBiggerFontSize">Heading Two</h2> From a visual standpoint, ...

htmlcsswcag2.0

Is it possible to incorporate a label within a dropdown menu (<select>)?

How can I add a label inside a select box using Bootstrap? Here is an example: Before selecting an option After selecting an option, the label should appear in a small size like this: After selecting an option : <div class="form-group"> & ...

javascripthtmlcssbootstrap-4

Utilize Javascript to extract and showcase JSON data fetched from a RESTful API

I'm attempting to use JavaScript to pull JSON data from a REST API and display it on a webpage. The REST call is functioning correctly in the Firefox console. function gethosts() { var xhttp = new XMLHttpRequest(); xhttp.open("GET", "https://10 ...

javascripthtmljsonajaxrest

A linear gradient effect originating from the center/middle of the background

Is it possible to create a linear-gradient background that starts from the center or middle of the screen? This is the CSS I am currently using: body { display: table; width: 100%; height: 100%; margin: 0 auto; background-repeat: no-r ...

htmlcssbackgroundlinear-gradients

Tips for disabling scrolling on a <div> using another <div> as a lock

I am facing an issue with a page where a div is appended to the body of an HTML. The problem is that there are two scrolls appearing - one on the new overlaying div and another behind it. Here is an approximate structure of the page, how can I ensure that ...

javascriptjqueryhtmlcss

I am consistently finding a class in my program, but when I try to locate the same class in the HTML, it seems to be non-existent

Here's the issue: when I manually search for a class = "warn," it only finds it if the seller does not have the card. This is because the text indicating that the card is unavailable has that class. However, the code below always returns TRUE even if ...

htmlselenium-webdriver

Customize the appearance of Angular components by altering their color schemes

When working on my project, I often utilize pre-made Angular components. However, some of these components come with colors that do not align with the overall aesthetic of my project (refer to image above). To rectify this issue, I am looking to replace t ...

cssangular