How come my footer is appearing at the top of my webpage?

I have encountered a problem where the footer is displaying on top of my page, despite not using any floats, wrappers, or grids in my code. The code snippet can be found below this text. Could someone assist me in identifying why this issue is occurring and provide guidance on how to prevent it from happening again? Thank you for your help!

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<style type="text/css">

body {
      margin:0px;
     }


main {
      margin: 1cm auto;
      width: 50%;
      padding: 1cm;
      border: 1px solid black;
     }


 nav {
     border: 1px solid black;
     }
</style>
</head>

<body>
<footer> Service Networking </footer>

<nav>
   <label>Name: <input type="text" name="name"> </label>
   <label>Surname: <input type="text" name="surname"> </label>
</nav>

<main>
   <h1> Welcome! </h1>
   <p> This is your first page </p>
</main>
</body>

</html>
htmlcssfooter

Answer №1

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<style type="text/css">

body {
      margin:0px;
     }
     
main {
      margin: 1cm auto;
      width: 50%;
      padding: 1cm;
      border: 1px solid black;
     }


footer {
     border: 1px solid black;
}

</style>
</head>

<body>

<footer> Service Networking </footer>

<nav>
   <label>Name: <input type="text" name="name"> </label>
   <label>Surname: <input type="text" name="surname"> </label>
</nav>

<main>
   <h1> Welcome! </h1>
   <p> This is your first page </p>
</main>


</body>


</html>

You were using <footer>, before nav and main.

Answer №2

Consider adding the footer elements below the main content on your website for better organization.

Answer №3

body {
      margin:0px;
     }

main {
      margin: 1cm auto;
      width: 50%;
      padding: 1cm;
      border: 1px solid black;
     }

 nav {
     border: 1px solid black;
     }         
<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
</head>

<body>

<nav>
   <label>Name: <input type="text" name="name"> </label>
   <label>Surname: <input type="text" name="surname"> </label>
</nav>

<main>
   <h1> Welcome! </h1>
   <p> This is your first page </p>
</main>
<footer> Service Networking </footer>
</body>

</html>

Answer №4

The footer tag should be placed at the end of the document, after the nav and main tags.

body {
      margin:0px;
     }


main {
      margin: 1cm auto;
      width: 50%;
      padding: 1cm;
      border: 1px solid black;
     }


 nav {
     border: 1px solid black;
     }
     
    footer{
    border: 1px solid green;
    }
<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">

</head>

<body>


<nav>
   <label>Name: <input type="text" name="name"> </label>
   <label>Surname: <input type="text" name="surname"> </label>
</nav>

<main>
   <h1> Welcome! </h1>
   <p> This is your first page </p>
</main>

<footer> Service Networking </footer>
</body>

</html>

Answer №5

When the first element inside <body> is footer, the HTML is displayed line by line.

The footer tag is a semantic element introduced in HTML 5, which means it has meaning associated with it.

Since the footer tag is a block level element, it has the property display:block.

Similarly, if you use the header element as the last element before the body, its contents will be shown at the bottom. Semantic tags help both browsers and humans understand the content within them.

You can include multiple header footer section tags as long as they provide meaning for both browsers and users.

Demo : https://jsfiddle.net/akshaymhatre89/ekvgLxcy/11/

<header>
  <h1>Header</h1>
</header>
<hr>
<main>
  <section>
    <header>
      <h2>Section header</h2>
    </header>
    <article>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa ex minima magnam 
    </article>
    <footer>
      <p>End of article</p>
    </footer>
  </section>
</main>
<hr>
<footer>
  &copy; Copyright :-)
</footer>

More Articles to refer :

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

Having trouble retrieving an array element within an HTML table

Currently, I am working on a database project related to bar beer drinkers. To display the results of my queries on a local host website, I am running queries on my database and using Angular. The issue I am facing is that while I can see the query executi ...

htmlangularhtml-table

Is it permissible to use DEFER or ASYNC when including a stylesheet?

I am curious if script files are able to utilize the DEFER and ASYNC keywords on a resource include. Are these keywords also compatible with stylesheet (CSS) includes? The syntax I imagine would be: <link rel="stylesheet" type="text/css" href="./path/ ...

htmlcssasynchronousdeferred-loading

what distinguishes CSS properties for Id versus class selectors

Currently in the process of creating my inaugural website, which consists of just four pages. Each page follows the standard layout structure with a header, navigation bar, content division (div id="content"), and footer. As I delve into adding CSS proper ...

css

There is a slight misalignment when trying to horizontally center a character within a div

I've experimented with various methods like using a px width or em widths. I've attempted nesting a span and trying different styles such as text-align:center or margin:0 auto. I can manage to center either the R or the S, but struggling to get ...

css

List on the Left Side with Scroll Capability

In my ASP.NET web application that targets .NET 3.5 and utilizes an AJAX asp:UpdatePanel, I have structured the page layout using multiple div elements to divide the vertical space into sections - header, first content, second content, third content, and f ...

htmlcsshtml-table

Modifying the color of a div element solely through CSS styling

I am currently working with a set of buttons, available at this link. While browsing through this helpful post, I encountered an issue. Whenever I click on another element, the orange color of my button disappears. How can I maintain the orange color on t ...

htmlcssangular

What could be the possible reason for the controls in my element getting disabled due to adding a JavaScript background

First and foremost, I want to share a link with you to a page that I am currently developing so you can better understand the situation: Additionally, here is a link to the background effect: https://github.com/jnicol/particleground If you visit the page ...

javascripthtmlcsswordpress

Prevent clicking on the <div> element for a duration of 200 milliseconds

I need to make this box move up and down, but prevent users from clicking it rapidly multiple times to watch it go up and down too quickly. How can I add a 200 millisecond delay on the click or disable clicking for that duration? View the jsfiddle example ...

javascriptjqueryhtmlcss

Step-by-step guide for making a CSS triangle design that is compatible across different browsers

Here's a common CSS code for creating a CSS triangle: display: inline-block; vertical-align: middle; content: " "; border-right: 4px solid transparent; border-left: 4px solid transparent; border-top: 6px solid black; width: 0; height: 0; Click here ...

csscross-browsergeometrycss-shapes

Combining the p class with flexbox for optimal layout design

I have four flexed container boxes and I am looking to add text below them in a row. Does anyone have suggestions on how I can achieve this alignment, as well as tips for optimizing the code? .container { display: flex; flex-direction: row; just ...

htmlcsstextflexbox

What steps can be taken to prevent a "Flash of Unstyled Content" when using fixed-width cells in CSS Tables?

My website's design is heavily influenced by CSS tables. This decision was made to ensure consistent cell heights regardless of the content, making alignment easier. Overall, this method has been quite effective. However, there is an issue where the ...

htmlcssfouc

Guide on updating a MongoDB document upon clicking a button on an HTML page

I'm new to backend development and I've been working on creating a CRUD notes application without using React or EJS. My current issue is that I am unable to edit documents. The desired functionality is for the user to be directed to a page wher ...

javascripthtmlnode.jsexpressmongoose

struggling to rectify an undefined index error on my PHP page

My challenge revolves around accessing the token from an HTML page, where I have an input element containing the token. Whenever I try running this page on a server (WAMP) on Windows 7, I encounter an error stating "undefined index" on the "api_key". How ...

phpjqueryhtmlajax

Looking to implement URL navigation based on a selected value from a dropdown menu when the onClick button is pressed

I am struggling with getting the Go Button to navigate to a specific URL like "&age=10" without selecting it. I require assistance with creating code that will allow me to redirect to the URL with post URL variables for my WordPress site. ...

javascriptphpjqueryhtmlwordpress

The issue of Jquery selectors not functioning properly when used with variables

Currently working on a script in the console that aims to extract and display the user's chat nickname. Initially, we will attempt to achieve this by copying and pasting paths: We inspect the user's name in the Chrome console and copy its selec ...

javascriptjqueryhtmlvariablesselector

Unbelievable attribute: sup causing peculiar styling in link element

We've recently come across an issue where the text-decoration of an underline in an anchor tag appears strange when there is a sup element present. The visual glitch looks like this: For reference, here's the HTML structure we are working with: ...

htmlcss

Improving the Performance of HTML/CSS Animations - Enhanced Animation Speed

I have created an HTML page with CSS animation and transitions. <div class="container-fluid" id="team"> <div class="row first"> <div class="wrapper"></div> </div> <div class="row second"> <div class="wrapper" ...

htmlcsscss-transitionscss-animations

After uploading my website, I noticed that one of the tabs appears in Chinese

After uploading my website, I noticed that one of the tabs (more info) is displaying in Chinese for some unknown reason. I'm not sure why this is happening. Here is the URL: You can also check out the code here: http://pastebin.com/jFBUV1ga ...

htmlcss

Vue 3's Paged.js does not respond to requests for page breaks

Currently, I'm working on implementing page breaks in Vue.js 3. Despite my efforts and utilization of the specified CSS code, I am facing challenges with the ".page-break" class parameter. While I can successfully modify other elements like titlePage ...

htmlcssvue.jspagedjs

Allow frontend JavaScript to retrieve a text file that is restricted to individual users

Trying to articulate my goal is challenging, but I'll do my best to clarify. My objective is to enable JavaScript (or an alternative solution) to retrieve data from a text file on a static site and utilize that data in some way. The challenge here is ...

javascriptjqueryhtmlcssweb