Footer division appearing amidst body text

Currently, I am focusing on enhancing the CSS of a website for a project and my Footer DIV seems to have a mind of its own. The elements within the footer display correctly, but they are overlapping with my content DIV.

I attempted using absolute positioning to keep it in place, but that did not work as expected. Using 'fixed' makes it stay, but I am not satisfied with how it appears.

This is the CSS definition for the footer:

footer {
float: left; 
width: 960px; 
height: 40px; 
background-image: url("images/footer.jpg");
background-repeat: no-repeat;}

Below is how the Footer is coded at the bottom of the Index.html page:

<div id="footer" class=copyright>
<p>Copyright 2019- Nature Snap Photography Site Maintained by____</p>
</div>
</div>
</body>
</html>
htmlcss

Answer №1

 <style>{
      margin: 0px;
    }

    .grid-container {
      height: 100vh;
      display: grid;
      grid-template-columns: auto;
      grid-template-rows: 50px auto 50px;
      grid-template-areas:
        'header'
        'content'
        'footer';
    }

    .header {
      background-color: red;
      border-bottom: solid black 2px;
    }

    .content {
      background-color: blue;
      border-bottom: solid black 2px;

    }

    .footer {
      background-color: green;
      border-bottom: solid black 2px;

    }

    </style>
<!DOCTYPE html>
<html>

  <head>
    <meta charset="UTF-8">
    <title></title>
  </head>

  <body>
    <div class="grid-container">
      <div class="header"></div>
      <div class="content"></div>
      <div class="footer"></div>
    </div>
  </body>

</html>

I recommend exploring CSS Grid for layouts like this as it simplifies the process significantly.

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

Adding values dynamically to a select dropdown results in an empty field being inserted in the dropdown if the option includes spaces

I am facing an issue with my dropdown select feature, where the value is supposed to be added based on input from a text box. Everything works smoothly when the input in the text box consists of a single word without spaces. However, it fails to add anyth ...

javascriptjqueryhtml

Display an image with a colored background using CSS

Most of you have probably noticed that images on Facebook come with a default background. How can I achieve a similar background color for images without using an additional div just for the background? My current codes do create a background color, but th ...

css

Upon clicking the link, the JavaScript functionality failed to activate

When I click on a link and try to add a class, it's not working. I want to create a "modal" div. Here is the PHP/HTML code: <?php if(isset($_GET['ido'])) { ?> <div id="modal" class="modal" style="background: blue; width: 1 ...

javascriptphpjqueryhtml

What is the option for receiving automatic suggestions while formatting components in a react.js file?

When styling elements in our app using app.css or styles.css, VS Code provides auto-suggestions. For example, if we type just "back" for background color, it will suggest completions. However, this feature does not work in react.js or index.js. Why is that ...

javascripthtmlcssreactjs

Using Laravel and Bootstrap v4, you can easily implement a feature that redirects to a specific tab after

I have a webpage featuring 3 tabs. I am trying to set up the page so that it redirects to the same tab that was active before the reload. I assume each tab should append a string to the URL, like #menu1 or #menu2, but I'm having trouble implementing t ...

htmllaravelbootstrap-4tabs

What is the best way to find the longest element with the same class name using jQuery?

How can I dynamically find elements with the same length of class names? var className = $('.floor-4').attr('class').split(' ')[1]; var classLength = $('.' + className).length; Here is the HTML code: <div id="d ...

javascriptjqueryhtmlcss

Angular 6 Calendar Template issues with parsing: Unable to link to 'view' as it is not recognized as a valid property of 'div'

I am in the process of developing an application that utilizes this angular calendar. My tech stack includes Angular 6 with AngularFire2 and Firebase. Below is my app.module.ts file: import { BrowserModule } from '@angular/platform-browser'; imp ...

javascripthtmlangulartypescript

Utilize the div element to segment a webpage into four different sections

Within a div tag, I have used 4 other div tags to create equal areas. Is there an alternative method to achieve this division or improve it? <div style="width: 689px; margin-left: 215px; margin-top: 0px; float: none; height: 502px;"> ...

htmlcss

How can PHP be utilized to dynamically add classes to <li> elements and alternate them after every third item

I'm trying to find a way to add a class to an unordered list and alternate that class after every third item. Here's the code I have so far: <?php $i=1; foreach($this->items as $item) : ?> <li class="<?php if ($i % 3 == 0) : ...

phpcssaddclass

When switching tabs in Javascript, the page does not automatically reload. However, the page will reload only when it is on

After writing a code using javascript/Youtube API + PHP to fetch a YT video ID from a MySQL server and place it in Javascript, I realized that the page only reloads when the tab is active and not when it's in the background. This issue disrupts the wh ...

javascriptphpjqueryhtmlgoogle-chrome

Even though the model value is set to true, the material check box remains unchecked

My mat-table contains data and checkboxes. The checkboxes should only be checked when the element.select property is true. However, when I use [(ngModel)]="element.select", all the checkboxes end up getting checked. Below you can find the code snippet: &l ...

javascripthtmlcssangular

Tips for showing two divs alongside p tags in a single row

Is there a way to align two divs side by side on the same line, despite both having p tags and one containing an image that is necessary? I appreciate any workaround suggestions. Thank you! Here is the code snippet: HTML <div class="MainMenu"> ...

csshtmlimage

What's the best way in Angular 6 to set focus on an element that's being made content editable?

I am currently utilizing the contentEditable attribute in Angular 6 to allow for editing the content of elements within an ngFor loop. Is there a way to focus on a tag element when its contentEditable attribute is set to true? <div class="tag" *ngFor= ...

javascripthtmlangulartypescriptangular6

What is the best way to rearrange columns in bootstrapping version 3

In the process of developing a responsive website with the use of bootstrap 3, I am faced with the task of rearranging columns for the mobile version. The layout of the home page has been attached for reference, along with the desired layout for the mobi ...

htmlcsstwitter-bootstrap

Using jQuery to add HTML elements before the content of a list

I'm facing a challenge in dynamically adding new elements to my list. Through ajax, I retrieve HTML data from my database and aim to iterate through each new <li> element to gradually prepend them to the top of the list. This is the snippet of ...

jqueryhtmlajax

It is not possible to simultaneously utilize the properties `display: inline-block` and `width: 100%`

As someone with limited CSS knowledge, I have encountered a challenge. My goal is to ensure that my website's body has a width of 100%, while also preventing the content from wrapping when the browser window is resized. To achieve this, I attempted a ...

htmlcssstyleswidthinline

Optimizing FileReader result for seamless compatibility on all browsers and devices when loading into an HTML5 video player

I want to implement a feature where the selected video file can be loaded into an HTML5 element for users to preview before sending it to the server. However, I am encountering an issue with compatibility on Chrome and Safari browsers, both on desktop and ...

htmlvideosafarimobile-safarifilereader

Mobile browser does not support the font face

After following a guide on using the @font-face property for browser support, specifically the "Slightly Deeper Browser Support" method, I was pleased to see that it worked on my machine and even on a friend's browser. However, when testing the site o ...

css

Maintain the tab order for elements even when they are hidden

Check out this demonstration: http://jsfiddle.net/gLq2b/ <input value="0" /> <input id="test" value="1" /> <input value="2" /> By pressing the TAB key, it will cycle through the inputs in order. If an input is hidden when focused, press ...

javascriptjqueryhtml

Tips for modifying the background color of an individual row within a table using the Document Object Model (DOM)

I am trying to change the color of each row in a table only if the text inside the 4th cell is "DELAYED". I have created a function for this purpose, but the color is not changing as expected... function assignColor() { //retrieve all tr elements from ...

javascripthtmlcssdom