Bottom div refuses to adhere to the bottom of the page

I need help with creating a footer div that sticks to the bottom, left, and right of the page. The current footer doesn't extend all the way down and left. How can I resolve this without using "position: fixed;"?

Below is the code snippet (I have replaced the text with dots, and the footer div is the last div in the code).

body {
font-family: "Trebuchet MS", Helvetica, sans-serif;
height: 100%;
margin: 0px;
background-color: #FFFFFF;
overflow-x: hidden;
}

ul {
position: fixed;
    list-style-type: none;
    margin-right: 0;
margin-top: 0;
margin-left: 0;
right: 0px;
left: 0px;
    padding-left: 20px;
padding-right: 0px;
    overflow: hidden;
    background-color: #262626;
z-index: 2;
top: 0px;
}

li {
    float: left;
}

li a {
    display: inline-block;
    color: #b3b3b3;
    text-align: center;
    padding: 18px 20px;
    text-decoration: none;
}

a:hover {
color:white;
}

li img {
padding-left: 0px;
}

.dropdown-content {
    display: none;
    position: fixed;
    background-color: #262626;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.dropdown-content a {
    color: #bfbfbf;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}

.dropdown-content a:hover {background-color: #4d4d4d;
color: white;}

.dropdown:hover .dropdown-content {
    display: block;
}

h1 {
text-align: center;
color: #262626;
font-family: proxima-nova, "Proxima Nova", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 45px;
letter-spacing: 1.5px;
margin-top: 88px;
}

h4 {
position: relative;
left: 100px;
text-align: left;
color: #404040;
font-size: 16 px;
letter-spacing: 0.8px;
line-height: 34px;
background-color: transparent;
word-spacing: 0.5px;
}

.albumcovers {
position: relative;
float: right;
margin-right: 5px;
}

.audio1 {
position: relative;
width: 500px;
left: 320px;
bottom: 342px;
}

.audio2 {
position: relative;
width: 500px;
right: 186px;
bottom: 307px;
}

.audio3 {
position: relative;
width: 500px;
left: 320px;
bottom: 316px;
}

.audio4 {
position: relative;
width: 500px;
right: 186px;
bottom: 281px;
}

.audio5 {
position: relative;
width: 500px;
left: 320px;
bottom: 290px;
}

.audio6 {
position: relative;
width: 500px;
right: 186px;
bottom: 255px;
}

.audio7 {
position: relative;
width: 500px;
left: 320px;
bottom: 264px;
}

.audio8 {
position: relative;
width: 500px;
right: 186px;
bottom: 229px;
}

.audio9 {
position: relative;
width: 500px;
left: 320px;
bottom: 238px;
}

.audio10 {
position: relative;
width: 500px;
right: 186px;
bottom: 203px;
}

.dec1 {
text-align: center;
color: #cccccc;
font-size: 16px;
position: relative;
margin-bottom: 70px;
word-spacing: 150px;
}

.footer {
  position: relative;
  right: 0;
  bottom: 0;
  left: 0;
  padding-left: 7px;
  background-color: #1a1a1a;
  text-align: left;
  color: #666666;
  font-size: 12px;
}
<!DOCTYPE html>
<html>
<head>
<title>
.
</title>
<link href="https://fonts.googleapis.com/css?family=Roboto:300|Varela" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="PlaylistReggae.css">
<link rel="icon" type="image/png" href="favicon-32x32.png" sizes="32x32" />
<link rel="icon" type="image/png" href="favicon-16x16.png" sizes="16x16" />
<meta charset="UTF-8">
</head>

<body>
<ul>
  <li><a href="hiphop.html"><img src="hiphop.png" alt="HIPHOP" style="width:120px;height:18px;"></a></li>
  <li class="dropdown">
    <a href="javascript:void(0)" class="dropbtn">.</a>
    <div class="dropdown-content">
      <a href="Reggae.html">.</a>
      <a href="OldSchool.html">.</a>
      <a href="Modern.html">.</a>
    </div>
  </li>
  <li class="dropdown">
    <a href="javascript:void(0)" class="dropbtn">.</a>
    <div class="dropdown-content">
      <a href="PlaylistReggae.html">.</a>
      <a href="PlaylistOldSchool.html">.</a>
      <a href="PlaylistModern.html">.</a>
  <a href="* Nog in te vullen *">.</a>
    </div>
  </li>
  <li><a href="about.html">.</a></li>
  <li><a href="contact.html">.</a></li>
</ul>

<h1>.</h1>

<div class="dec1">
_____________________________________________________________
</div>

<img class="albumcovers"src="albumreggae.png" alt="Reggae Album Covers" style="width:315px;height:317px;">

<h4>
<div>.</div>
<div>.</div>
<div>.</div>
<div>.</div>
<div>.</div>
<div>.</div>
<div>.</div>
<div>.</div>
<div>.</div>
<div>.</div>

<audio controls class="audio1">
  <source src="TLB.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>

<audio controls class="audio2">
  <source src="CTD.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>

<audio controls class="audio3">
  <source src="ITL.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>

<audio controls class="audio4">
  <source src="BFS.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>

<audio controls class="audio5">
  <source src="SWT.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>

<audio controls class="audio6">
  <source src="CDP.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>

<audio controls class="audio7">
  <source src="MDR.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>

<audio controls class="audio8">
  <source src="WIV.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>

<audio controls class="audio9">
  <source src="NRS.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>

<audio controls class="audio10">
  <source src="MMD.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>

<div class="footer">This is the footer.</div>
</body>
</html>

htmlcsspositionfooter

Answer №1

It appears that a closing H4 tag is missing in your code. As a result, the browser automatically inserts it just before the closing body tag, following the footer section. To resolve this issue, make sure to place the closing H4 tag before the footer element for proper rendering.

Answer №2

Your footer division is nested within the h4 tag. Remember to properly close off the h4 tag before including the footer.

Answer №3

One way to structure your HTML is by using a template with 3 sections: header, main & footer, and applying the flex model to keep your footer fixed at the bottom of the page.

html,
body {
  height: 100%;
  margin: 0
}
/* layout */

body {
  display: flex;
  flex-flow: column;
}
main {
  flex: 1;
  overflow: auto;
  background:tomato;
}
/* demo , show main scrolling*/

main:after {
  content: ' end';
}
main:hover:after {  
  display: flex;
  align-items:flex-end;
  height: 100vh;
}
<header>stuff that comes in header. Any height</header>
<main>content that comes here, ican overflow </main>
<footer>fonter at view. Any height</footer>

If you prefer not to have the header section fixed, you can include it inside the main section so that it scrolls along with the rest of the content within main.

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

Tips for crafting interactive Dropdown menus

Visit this link for more information Hello all, I am a beginner in HTML and Javascript and seeking guidance on how to create dynamic dropdown menus similar to the ones on the provided website. I have successfully implemented the source code, but my questi ...

javascriptjqueryhtmlajax

Steps for modifying material-ui timepicker to display time in a 24-hour format

Presently, I am utilizing a Timepicker from material-ui. It is currently configured with type="time", allowing me to select times throughout the day in 12-hour increments with an AM / PM choice. However, I wish to adjust my picker to a 24-hour format, elim ...

javascriptcssreactjsmaterial-ui

Experience the magic of CSS Sprite once it's been successfully uploaded!

Visit the website for testing here Located at the bottom of the page are two images with hover effects - one labeled "Contact us" and the other "Jobs Available!" During local testing, these images are visible. However, once uploaded to a server, they dis ...

htmlcssftpcss-sprites

Using Javascript to automatically submit a form when the enter key is pressed

Can anyone help me with a password form issue? I want the enter key to trigger the submit button but it's not working for me. I understand that the password can be viewed in the source code, this is just for practice purposes. <!DOCTYPE html> & ...

javascripthtmlcssenter

Set default values for input fields based on selected options in php and mysql

I need help creating a form that will submit details when an option is selected from a database. The MySQL table has the following fields under USERS : [email], [age], [name]. I want to automatically fill in the values of other input fields when a user s ...

phpjqueryhtmlmysqldrop-down-menu

Chrome and Firefox: Images cling together

I've encountered an issue with my recently launched website. Some images in a grid appear to be stuck together, but this problem only occurs in Firefox and Chrome browsers. Oddly enough, zooming in to around 110% then back to 100% seems to temporarily ...

javascriptcsswordpressgoogle-chromefirefox

What is the best way to prevent images from being loaded with broken links?

Currently, I am working on a new feature that involves rendering images from servers. In the process of aligning these images, I noticed an excessive amount of white space due to loading images with broken links. https://i.stack.imgur.com/jO8BR.png Here ...

javascripthtmlangular

Aligning image vertically

I'm working on aligning an image vertically in my header. Currently, it's horizontally centered. header { background-color: blue; height: 118px; width: 1024px; text-align: center; } .container { margin-left: auto; margin-right: aut ...

htmlcssalignment

Unable to determine the data type of the JSON object during the

I'm having trouble reading an Object type of json... Here is the json I'm working with: body: { "111": { "name": "name1", "status": 10000 }, "222": { "name": "name2", "status": 20000 }, "333": ...

htmljsontypescriptangulargetjson

Showing a numerical value in the bottom-right corner alongside a backdrop of an image

I am attempting to create a container that measures 26x26 pixels and showcases a number at the bottom right corner of this container. Furthermore, I want to include a 24x24 picture as the background of the container. The code I have written so far is disp ...

htmlcss

Trigger a modal to open based on a specific condition

I have successfully implemented a default modal from Materialize, but now I am looking to add a conditional opening feature to it. In my application, there is a countdown timer and I want the modal to automatically appear when the countdown reaches a certa ...

javascripthtmljquerytwitter-bootstrap

What is the method for shifting content as the window is resized to ensure it remains in its original position?

My page features a grid with three div elements. Each div is the size of the viewport, resulting in only one div being visible at a time, while the other two remain outside the view. This makes the grid three times larger than the viewport. When resizing ...

javascriptjqueryhtmlcss

Retrieving information from PHP using AJAX

As a newcomer to the world of AJAX, I am faced with the task of retrieving data from a PHP file and storing it in a JavaScript variable. Despite exploring several examples, I have not been able to find a satisfactory solution. Here is a simplified HTML cod ...

phpjavascripthtmlajax

Deploying static files with Django in a production environment

My Django application is functioning properly on Ubuntu 14.04 with nginx 1.10, Django 1.10.2, and uWSGI 2.0.14. It is able to load static files such as JavaScript, CSS, and images, but the CSS files are not being applied to my website. Below is the configu ...

pythoncssdjangonginxstatic

jQuery Drag Drop Sorting Feature Fails to Work when Moving Items from List to Table Cell

I need assistance with creating a sortable list that can have its items dragged into a table cell, where the items can then be sorted within that cell. The process involves: Dragging a list item into the table cell. Sorting the list item in the secon ...

jqueryhtmlsortingjquery-ui

The mysterious case of the vanishing jQuery traversal box

I'm currently navigating using previous and next buttons, but it seems to be malfunctioning if I click too quickly. My goal is for the navigation to remain smooth without breaking. var $currDiv = $("#start"); $("div").hide(); $currDiv.c ...

jqueryhtmlcss

Display or conceal numerous WTForm labels

Is there a more efficient way to hide/show multiple wtform labels? Currently, I am achieving this with the following code: HTML: {{ render_field(var_1, class = "class_1") }} {{ render_field(var_2, class = "class_1") }} {{ render_field(var_3, class = " ...

jqueryhtmlclasswtforms

Creating files for two HTML pages with Vue: A step-by-step guide

Currently, I am working on creating two HTML files as part of my project structure. This is how it looks: |- node_modules |- public | |- blog | | |- some-page.html | |- index.html |- src (contains all the Vue components) |- Blog.Vue |- Index.Vue ...

htmlvue.jsvuejs2vue-cli-4

Eliminate the empty choice for Angular when dealing with dynamic option objects

Looking for assistance with this code snippet: <select ng-model='item.data.choice' > <option ng-if='item.data.simple_allow_blank == false' ng-show='choice.name' ng-repeat='choice in item.data.simple_choices&ap ...

cssangularjshtml

What methods could I use to prevent the WYSIWYG buttons from automatically linking?

I've been working on creating an editor but I'm facing a small issue. Every time I click on a button (such as bold or italic), it follows a link instead of performing the desired action. Here's a snippet of what I've tried so far: fu ...

javascripthtml