Issue with the footer not remaining at the bottom of the page

I'm in the process of updating my website and have come across an issue with the footer placement on one specific page. Typically, the footer stays at the bottom of all pages except for this particular page where it appears floated to the left instead of at the bottom where it should be. Below is the code snippet for that specific page:

HTML

<aside class="expert">
    <h2>Always a Satisfied Customer</h2>
    <ul class="b">
        <li>Upfront Pricing</li>
        <li>Affordable Rates</li>
        <li>Courteous and Respectful</li>
        <li>Always On Time</li>
    </ul>
</aside>

<aside class="refer">
    <p>I would recommend EJP to anyone and everyone!  They showed up, looked at my issue, and fixed it promptly.  They are simply the best!  <br />-Tim S.</p>
</aside>

<p>EJP Electric offers repairs, upgrades, and installations, delivering high customer satisfaction by getting the job done right the first time.</p>

<footer>
    <div id="footer">
        <address>EJP Electric<br />
                 8603 E M115<br />
                 Cadillac, MI 49601<br />
                 231-775-3799<br />
                 <a href="mailto:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="9eecffe7defbf4eefbf2fbfdeaecf7fdb0fdf1f3">[email protected]</a>">Email</a>
        </address>
    </div>
</footer>

CSS

.expert {
    background-color: white;
    display: block;
    border: solid;
    float: right;
    right: 20px;
    padding: 3px;
}

.refer {
    background-color: white;
    border: solid;
    float: right;
    clear: right;
    width: 150px;
    display: block;
    margin-top: 5px;
    padding: 5px;
}


#footer {
    position: absolute;
    width: 600px;
    font-size: 12px;
    float: left;
} 

Answer №1

To fix the issue of floating elements, you can use the clear property:

The clear CSS property determines whether an element can sit next to floating elements preceding it or if it must be moved down (cleared) below them.

footer {
  clear: both;
}

.expert {
  background-color: white;
  display: block;
  border: solid;
  float: right;
  right: 20px;
  padding: 3px;
}
.refer {
  background-color: white;
  border: solid;
  float: right;
  clear: right;
  width: 150px;
  display: block;
  margin-top: 5px;
  padding: 5px;
}
#footer {
  position: absolute;
  width: 600px;
  font-size: 12px;
  float: left;
}
footer {
  clear: both;
}
<aside class="expert">
  <h2>Always a Satisfied Customer</h2>
  <ul class="b">
    <li>Upfront Pricing</li>
    <li>Affordable Rates</li>
    <li>Courteous and Respectful</li>
    <li>Always On Time</li>
  </ul>
</aside>

<aside class="refer">
  <p>I would recommend EJP to anyone and everyone!  They showed up, looked at my issue, and fixed it promptly.  They are simply the best!  <br />-Tim S.</p>
</aside>

<p>EJP Electric offers repairs, upgrades, and installations, delivering high customer satisfaction by getting the job done right the first time.</p>

<footer>
  <div id="footer">
    <address>EJP Electric<br />
      8603 E M115<br />
      Cadillac, MI 49601<br />
      231-775-3799<br />
      <a href="mailto:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="94e6f5edd4f1fee4f1f8f1f7e0e6fd8db2fdebfbdcfdda4c0cdfbc6f1fdfd8bddfbebfc3ddda" </a>">Email</a></address>
  </div>
</footer>

Answer №2

Your HTML5 code needs some adjustments for better semantics. For more information, you can refer to html5doctor

Regarding your query:

html, body, #wrap { height: 100%; }
body > #wrap {height: auto; min-height: 100%;}

#main {
    padding-bottom: 150px; /*ensure same as footer height*/
}
#footer { 
    position: relative;
    margin-top: -150px; /*offset by footer height*/
    height: 150px;
    clear: both;
} 

<div id="wrap">
    <div id="main"></div>
</div>
<div id="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

To keep the PHP echo statement inline with the HTML code, simply use the following syntax

(<?php _e( 'Up to', 'test' ); ?> &pound;<?php $current_price = get_field( 'price_details_price_b', 'option' ); $exchange_rate = get_field( 'price_details_exchange_rate', 'option' ); ...

Adjust the width of columns using HTML and CSS

UPDATED: Here is a real-life scenario I am facing: I am trying to adjust the width of columns in my table using inline CSS. Let me provide you with an example: The Table was initially set to 100%, like this: <table width=100% ...> The total number ...

How can images from a dynamic table be converted to base64 format in Vue.js and then sent in a JSON file?

Hello everyone, I'm facing an issue with a dynamic table where I need to add multiple rows, each containing a different image. I attempted to convert these images to base64 format and save them in a JSON file along with the table data. However, the pr ...

Is there a way to modify the button's color upon clicking in a React application?

I am a beginner in the world of React and currently exploring how to utilize the useState hook to dynamically change the color of a button upon clicking. Can someone kindly guide me through the process? Below is my current code snippet: import { Button } ...

Submit your document without relying on the web control feature

Currently, I am developing a fingerprint web application where I will be retrieving the user's fingerprint using ActiveX controls. My goal is to display the fingerprint image on the webpage without requiring users to manually select and upload it usi ...

Guide to designing a CSS gradient with a downward arrow linked to a specific container

I'm attempting to add a triangular arrow beneath the v-container, complete with a gradient color scheme. However, I'm struggling to integrate the gradient seamlessly. If I use CSS to create the arrow, the gradient doesn't align correctly. ...

How can I ensure a DIV is shown on every sub-page?

Is there a way to dynamically display a <div id="chatbox"> in all subpages without needing to manually edit each one? For example, adding this code to the main index.html file and having it appear on /products/index.html. ...

I am having trouble sending the text of a selected list item from a dropdown menu to the controller from the view in MVC4. The controller is receiving a null value. Can someone please

This is my code snippet for creating a dropdown menu to select classes: <div class="dropdown"> <button class="btn btn-danger btn-lg dropdown-toggle" type="button"id="menu1" data-toggle="dropdown">Go To Class<span class="caret"></ ...

What could be the reason for the lack of styling on the select element when using PaperProps in the MenuProps of my Select component?

I've been struggling to remove the white padding in this select box for a while now. I've tried countless variations and places to tweak the CSS with no success. Any suggestions on how to make it disappear? The project is using MUI 5, and I even ...

Designing the Structure for a Private Network System

In the works is a plan to develop a production application catered towards small and medium businesses. The target for this intranet application is 15 to 30 concurrent users. The proposed architecture includes: Client: Firefox browser UI: HTML, JavaScrip ...

What is the method for including a Bootstrap Icon within a placeholder text?

I am attempting to insert a search icon inside an input text field, but I am unsure of how to accomplish this. My desired result is similar to: input search Can Bootstrap Icons be used within a placeholder? I have seen some examples, but the icon remaine ...

Attempting to create a login and registration form

Hello, I am attempting to create a form that can generate new user accounts and passwords. These values should be stored from the input tag when the user clicks on the register button. Unfortunately, I am encountering an issue where clicking the register ...

Odd behavior observed when clicking on the link

On the initial click with an anchor tag, I am experiencing different behavior compared to subsequent clicks. When the href value is set to "", no HTTP GET request is made on the first click. I cannot determine why the first click would behave differently t ...

Attach the footer to the bottom of the screen only if the main page text is limited in length

How can I ensure that my footer sticks to the bottom of the screen only when there is minimal content on the page? When there is a lot of content, I'd like the footer to appear after the content rather than being pinned at the bottom, especially since ...

Pure CSS tab system that prevents label propagation using anchors

I am in the process of creating a tab system using only CSS with the help of the :target and :checked pseudo classes. However, I have encountered an issue where an anchor inside the label is not triggering the :checked. When clicking on the anchor, the :c ...

Is it possible to target a specific element within one of two classes that share the same name using CSS or XPath in Webdriver.IO?

Currently, I am using Webdriver.io and facing a challenge in selecting an element within the "text-fields-container" class. This particular element happens to be a password field, and both classes share the same name. Can someone guide me on how to go abou ...

Is it possible to design this layout within a flex container while ensuring the specific order of elements remains intact for potential future swaps?

Check out this example layout <div class="flex"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> <div class="item"& ...

Sticky positioning and visible overflow restrictions

When position sticky is used within a container with overflow:hidden, it does not work as expected. However, the overflow hidden property is necessary in this case. <div class="lg:col-start-7 lg:col-end-13" style="overflow:hidden"&g ...

Issue with backdrop-filter blur effect not functioning correctly

I'm currently utilizing SCSS and within my _header.scss file, I am importing it into my main.scss like so: @use "header"; Here is the snippet of code from my header file (I've removed some less important details such as borders, margin ...

What steps should I take with my Android PWA manifest and service workers?

I created a web application that I want to prompt Android users to download when they visit. To build my service workers and manifest, I utilized PWA Builder which can be found at Now that I have the manifest file ready, should I simply upload it to the r ...