The footer on my website refuses to stay in its designated

I have been searching online and tried the recommended solutions, but it seems like the footer is still overlapping my page. Does anyone know why this might be happening? 

footer {
    background: rgba(0, 0, 0, .93);

I read on some forums that setting the min height to 100% could help.

    min-height: 100%;

However, even after setting the position, I am encountering the same issue. 

    position: relative;
}
h4 {
    text-align: center;
    font-family: 'open_sansbold', sans-serif;
    font-size: 30px;
    font-weight: 700;
    color: white;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 10px;
    padding-top: 13em;
}
footer p {
    text-align: center;
    font-family: 'open_sansbold', sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: white;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 5px;
    padding-top: 0.5em;
}
htmlcss

Answer №1

To ensure that the footer is displayed properly, one easy method is to insert a blank div above it with dimensions similar to the footer. This will create space and prevent any overlapping issues.

<body>
    <div style="height:400px;"></div>
    <footer></footer>
</body>

Answer №2

The desired outcome is not entirely clear to me, but I did not notice any overlap issues (after addressing the h4 tag). However, adjusting the height and padding-bottom values should resolve the size problem. Here is a link to the code snippet

footer {
    background: rgba(0, 0, 0, .93);
    height: auto;
    position: relative;
    clear:both;
    padding-bottom: 50px;
}

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 steps can I take to prevent my JavaScript code from interfering with my pre-established CSS styles?

I'm currently designing a mini-email platform that serves as a prototype rather than a fully functional application. The HTML file contains placeholder emails that have been styled to appear presentable. I've implemented an input bar and used Jav ...

javascripthtmlcss

Nuxt: Issue with Head function affecting title and meta tags

I need to customize the titles and meta descriptions of different pages on my Nuxt website. However, I am struggling to make it work using the head() method as indicated in the documentation. For example, in my contact.vue file: export default class Cont ...

htmlvue.jsnuxt.js

Hiding a div with Javascript when the Excel dialog box is loaded

I have a piece of JavaScript code that is activated when the user clicks on an excel image. $("#excel").on("click", function () { $('#revealSpinningWheel').reveal(); $(window).load(function () { $('#revealSpinningWheel').hide ...

javascriptjqueryhtmlexcel

Executing jQuery post request on a div loaded via ajax

I'm facing a challenge with my webpage. I have a section where the content of a div is loaded via ajax. This div contains forms, and after submission, it should update to display the new content without refreshing the entire page. Can anyone guide me ...

javascriptphpjqueryhtmlajax

How to apply new CSS styles to override the existing ones for an element

I have a website with custom CSS styling applied to an <A> tag, including styles for A:hover. However, I need to remove these hover effects for one specific instance of the tag. Is there a way in CSS to set a property so that it does not change? Let ...

htmlcsshover

What obstacles must be overcome when developing a CSS framework?

Currently, I am delving into the realm of popular CSS frameworks such as Bootstrap and Foundation. While studying them, I have identified aspects that I believe could be enhanced and customized to suit my own projects or potentially for free distribution i ...

csscss-frameworks

Having difficulty automatically populating a textarea with the chosen option from a datalist

Is there a way to automatically populate the Address field of a client in a textarea based on the input of the client's name in an input field? I have created a 'for loop' to retrieve a datalist of client names. For the address, I retrieved ...

javascriptphphtml

What is preventing me from using header() to redirect to the page?

There seems to be an issue with the URL redirection. Instead of redirecting to Activated.php, it is currently showing http://localhost/SP/activation.php/Activated.php instead of http://localhost/SP/Activated.php. <?php require 'db.php'; $msg= ...

phphtml

What is the best method to eliminate whitespace in mobile view when utilizing the <Image /> tag in Next.js?

I am currently developing a website using Next.js. I have used the <Image /> tag to display images on the site. On mobile view, I noticed some white space around the image components, while on desktop everything looks fine. Upon checking the network ...

cssimagesvgnext.jsnext-images

Using JS to switch between text and state in ToneJS

I am facing an issue with the text not displaying in the "play-stop-toggle" element, despite my limited experience with JS. My desired outcome includes: [SOLVED] The text in <div id="play-stop-toggle" onclick="togglePlay()">Play ...

javascripthtmlcsstone.js

Managing content in two separate divs at the same time using AJAX

I am curious to know how I can achieve a functionality where editing the text field on the left will automatically update the text field on the right. I have a feeling that it involves using AJAX, and I would like to implement it as well. Can anyone guid ...

htmlajaxformsjquery

Ways to set each tinymce editor as standard excluding a few selected ones

Currently, I am utilizing TinyMCE as my text editor for a specific project. Within the header of my codebase, I have specified that all <textarea> elements should be rendered with TinyMCE functionality. By default, these text areas have a height of 3 ...

javascripthtmltinymce

Creating a disabled HTML button that reacts to the :active CSS pseudo class

CSS: button:active { /* active css */ } button:disabled { opacity: 0.5; } HTML: <button disabled="disabled">Ok</button> After clicking the button, the browser applies the button:active state to give the appearance of a click, despite the ...

htmlcsscss-selectorspseudo-class

Scrolling does not function properly on Android devices when utilizing skrollr.js in conjunction with multiple div elements containing the id "skrollr-body."

Having trouble with the scroll functionality in my skrollr.js animations. Everything works fine on desktop, but when I checked the rendered HTML in the browser console, I noticed that there are two divs with the same id "skrollr-body". One is empty and the ...

javascriptjqueryhtmlcssskrollr

Animating range tick movements as the range thumb moves

My custom range input includes a span that displays the range's value and a div with multiple p elements acting as ticks. To create these ticks, I had to use a custom div because using "appearance: none" on the range hides the ticks by default. The ti ...

javascripthtmlcssanimationrangeslider

Tips on positioning content beneath a fixed header or navigation bar when viewed in a web browser

Hi, I'm having an issue with creating a fixed header using HTML and CSS. When I set my header to be in a fixed position, it covers up the content below it. I want the content to be positioned under the header when the page is loaded. Additionally, I&a ...

javascripthtmlcss

"Creating Search Engine Optimization friendly URLs: A Step-by-Step

Looking for ways to optimize my dynamic URL! http://www.example.com/hamlyn/page.php?id=14 Any suggestions on shortening or making it more search-engine-friendly? ...

phphtmlmysql.htaccess

Equal row sizes in the Bootstrap framework

I am trying my best to explain the situation. Currently, I am utilizing bootstrap for a project where I have two columns - one containing an image on the left and the other with a title and description on the right. My goal is to make the photo fill the en ...

htmlcssimagetwitter-bootstrapbootstrap-4

The CSS grid-template-areas feature is not performing as anticipated

.content { width: 600px; height: 600px; border: 4px solid lime; display: grid; grid-template-areas: 'a d' 'b d' 'c d'; } textarea, iframe { margin: 0; box-sizing: border-box; } .content > .a {gri ...

htmlcsscss-grid

Struggling with CSS float problems

I'm currently working with the Pure CSS framework and my code resembles this: <div class="container pure-g"> <header class='pure-u-1'> <h1 class='logo'> <a href="#">TEST</a> </h1> &l ...

htmlcssyui-pure-css