The footer lies at the bottom of the page, demarcated by

I'm struggling to position the footer at the bottom of the page with a horizontal line just above it. Despite trying various resources, I can't seem to get the footer to stay at the bottom. I'm currently using a blog template as the basis for my signup page.

Here's a sample

HTML

    <div id="header">

    </div>

    <div id="main"> 
    <div id="container">

  <form action="index.html" method="post">

    <p id="form_title" style='color:#808080'>Create an Account</p>

    <fieldset>
      <legend style="color:#585858">Get started with Your Profile</legend>
      <label for="name" style='color:#808080;font-size:14px'>CUSTOM NAME</label>
      <input type="text" id="name" name="user_name" style="color:#404040">


      <label for="type" style='color:#808080;font-size:14px'>TYPE</label>
      <select id="sel-type" name="type">

        <option value="frontend_developer">Front-End Developer</option>
        <option value="php_developor">PHP Developer</option>
        <option value="python_developer">Python Developer</option>
        <option value="rails_developer"> Rails Developer</option>
        <option value="web_designer">Web Designer</option>
        <option value="WordPress_developer">WordPress Developer</option>


    </select>
    <label for="type" style='color:#808080;font-size:14px'>REGION</label>
    <select id="sel-region" name="region">

        <option value="frontend_developer">Front-End Developer</option>
        <option value="php_developor">PHP Developer</option>
        <option value="python_developer">Python Developer</option>
        <option value="rails_developer"> Rails Developer</option>
        <option value="web_designer">Web Designer</option>
        <option value="WordPress_developer">WordPress Developer</option>


    </select>


    </fieldset>
    <button type="submit">Create Profile</button>
  </form>



    </div>

</div>

<div id="footer">
    <a href="About">About</a>
    <a href="info.com">Instructions</a>



<a href="tt.com">Encountered an issue?</a>  
</div>

CSS

*, *:before, *:after {
 -moz-box-sizing: border-box;
 -webkit-box-sizing: border-box;
 box-sizing: border-box;
 }

body {
 font-family: 'Lato';
 background-color: #E8E8E8;

}

#header {
   width:100%;
   background-color: #27272D;
   height: 50px ;
   border:1px solid;
   position:relative;

}
#main{
   border:1px solid;

   width:100%;
   height:100%;
}

#container{

    margin-top: 100px;
    border:1px;
}

  form {
   max-width: 300px;
   margin: 10px auto;
   padding: 10px 20px;
   border-radius: 3px;
   background-color: white;
   border:1px;
     }

  #form_title {
    margin: 10px 0 30px 15px;
    font-size:20px;
   }

 input[type="text"],
 select {
   background: rgba(255,255,255,0.1);
   border: none;
   font-size: 16px;
   height: auto;
   margin: 0;
   outline: 0;
   padding: 15px;
   width: 100%;
   background-color: #e8eeef;
   color: #8a97a0;
   box-shadow: 0 1px 0 rgba(0,0,0,0.03) inset;
   margin-bottom: 20px;
  }

   input[type="text"]{
      border-radius: 6px;
     -moz-border-radius: 6px;
     -khtml-border-radius: 6px;
     -webkit-border-radius: 6px;
     height:44px;
     font-size: 14px;
      }


  select {
   padding: 6px;
   height: 44px;
   border-radius: 2px;
  }

 button {

   color: #FFF;
   background-color: #13ABAF;
   font-size: 14px;
   text-align: center;
   font-style: normal;
   border-radius: 5px;
   width: 96%;
   height:44px;
   border: 1px solid;
   border-width: 1px 1px 3px;
   margin-bottom: 10px;
   margin-left: 10px;
   }

  fieldset {

    border: none; 
  }

  legend {
    font-size: 17px;
    margin-bottom: 24px;
  }

  label {
   display: block;
   margin-bottom: 8px;
  }

  label.light {
   font-weight: 300;
   display: inline;
  }



  #horizontal-line{ 

     display: block;
     margin-top:100px;
     margin-bottom: 60px;
     width:96%;
     margin-left: auto;
     margin-right: auto;
     border-style: inset;
     border-width: 1px;
     border-color: #F0F0F0;


     } 

    #footer {
     position : absolute;
     bottom : 0;
     height:60px;
     margin-top : 40px;
     text-align: center ;
     font-size: 10px ;
     font-family: 'Lato' ;
     }

    @media screen and (min-width: 480px) {

    form {
      max-width: 480px;
     }

 }
htmlcss

Answer №1

If you're working on your CSS styling, consider the following:

#footer {
    position: relative; 
    ...
}

As for adding a horizontal line, simply use:

<hr>

Place the HTML tag above the footer section.

(I apologize for any awkward formatting, as using the tag often inserts a horizontal line in StackOverflow)

This approach is straightforward and requires minimal CSS modifications.

Check out this JSFiddle for a live example

Answer №2

Here's a CSS trick for you: instead of using a horizontal line, try using a border on your footer.

    footer {
       position: absolute;
       bottom: 0;
       height: 60px;
       border-top-width: 5px;
       border-top-style: solid;
       border-top-color: #FFF;
    }

Answer №3

My approach would involve using a separate tag for the footer section and incorporating the Horizontal Rule tag.

<div id="footer">
                <hr>
   <footer>
           <a href="About">About</a>
           <a href="info.com">Instructions</a>



           <a href="tt.com">Encountered an issue?</a>  
  <footer>
</div>

Thank you

Answer №4

To address the issue, it is recommended to eliminate the use of position: absolute in your CSS:

#footer {
    position: absolute;
    /* ... */
}

To see the updated code, you can view it on FIDDLE: https://jsfiddle.net/lmgonzalves/750h2crz/2/

Answer №5

Made some improvements to your CSS code:

#footer {
    position:fixed;
    width:100%; /* ensure full width on screen */
    border-top:1px solid #aaa; /* customize border color */
    padding-top:10px; /* create space between content and footer */
    background:#fff; /* set background color */
    /* include any other relevant properties */
}

Adjusted body styling to accommodate the footer:

body {
    /* add any other necessary styles */
    padding-bottom:65px; /* create space at bottom for footer */
}

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

Removing an MySQL database using a PHP HTML button

While attempting to remove a row from my MySQL PHPMyAdmin database using a button in AssetApprovalForm.php, I encountered an issue. Upon clicking the decline button in AssetApprovalForm.php, nothing happens. Click here for the image of AssetApprovalForm.p ...

phphtmlmysql

Tips for effectively overriding default CSS in JavaFX 8 for TableView

I've been trying to customize the appearance of specific columns in a tableview using JavaFX. My goal is to make editable values display with a light yellow background to indicate that they can be edited. However, when I apply the following CSS to th ...

csstableviewjavafx-8

The JSON data fails to load upon the initial page load

I am having trouble getting JSON data to display in JavaScript. Currently, the data only shows up after I refresh the page. Below is the code I am using: $(document).ready(function () { $.ajax({ url:"http://192.168.0.105/stratagic-json/pr ...

javascriptjqueryhtmljson

Tumblr post not automatically playing flash content

I am facing an issue with embedding a flash object on my tumblr blog (Billy's audio player) where I have to click a white play button for the object to work properly. This problem seems to occur specifically in Chrome and Edge browsers, as other websi ...

htmlcssflashembed

Two pictures, one adjusting in size and one staying the same size

I am working on a design with an 800px wide div that contains side-by-side images - one photo and one map. The challenge I am facing is that the map, which is 300px in width and has intricate details, becomes unusable when resized for smaller screens. I wa ...

htmlcssresponsive-designimage-resizing

Navigate through the overlay's content by scrolling

Objective: Looking to implement a scroll feature for long content. Issue: Not sure how to create a scroll that allows users to navigate through lengthy content. Thank you! function openNav() { document.getElementById("myNav").style.height = "1 ...

javascriptjqueryhtmlcss

Getting the local path of a file from an input file in Angular 7

Is there a way to retrieve the local file path from an input field in HTML? After running the code below, I obtained 'C:\fakepath\fileTest.txt' I am looking for a method to get the local path so that I can pass it on to my control ...

htmlangulartypescriptangular7

Even when applying a class, the CSS link:hover style will only affect the initial occurrence

I've hit a wall on this issue and can't seem to find a solution. I styled a few links using classes, but it seems that only the first link is accepting the :hover and :visited state styling. I made sure to use classes to style all of them. Not su ...

htmlcsshyperlinkhovervisited

Adding an HTML element to the DOM in an AngularJS directive without using jQuery

Looking to enhance my AngularJS directive by including an svg tag within the current element, currently using jQuery for this purpose. link: function (scope, iElement, iAttrs) { var svgTag = $('<svg width="600" height="100" class="svg">< ...

javascriptjqueryhtmlangularjs

Tips for resizing an image to fit within a col-sm-12 column in Bootstrap

I have a dilemma with two columns - I want to place my image in the first column so that the second column can move down. see image here Here is my HTML code: <div class="container-fluid"> <div class="row"> ...

htmlcssresponsive-designbootstrap-5

The IIS appears to be experiencing difficulties in serving static content such as CSS, JavaScript, and images, resulting

I've completed this process a countless number of times... Start by creating a project (in this case, an empty web application using only HTML files). Edit the hosts file to allow for a custom URL (local.xxx-xxx.com) Create an IIS website and app po ...

htmlasp.netiis

Is it possible for my OAuth2 callback page to share the same HTML page? Also, what is the process for obtaining the token?

In my setup, I am working with static html and javascript along with C# Web API. One of the scenarios I encountered involves a link that triggers an oauth2 server from my HTML file named index.html. The question arises: Is it appropriate to establish the c ...

c#javascriptjqueryhtmloauth-2.0

Tips for keeping your avatar contained within a Bootstrap grid

I am attempting to adjust the positioning of my "image holder" (avatar) with a top and bottom margin of 3px, but when I implement this change, the image holder shifts outside of the grid. Below is the code snippet in question: <div class="container con ...

htmlcss

Populate the database with values when the button is clicked

Hello, I encountered an issue with my code where it is adding empty values to the database when attempting to enter input text values. I am using PHP and MySQL for this task. <html> <body> <input type="text" name="value" /> <input ...

javascriptphphtml

Modifying CSS stylesheet does not alter the background color

body { background-color: bisque; } <!DOCTYPE html> <html> <head> <title>Reading</title> </head> <body> <h1> <button><a href="index.html">Home</a></button> & ...

htmlcssbackground-color

Display a helpful tooltip when hovering over elements with the use of d3-tip.js

Is it possible to display a tooltip when hovering over existing SVG elements? In this example, the elements are created during data binding. However, in my case, the circles already exist in the DOM and I need to select them right after selectedElms.enter ...

javascripthtmld3.jssvg

Generate a new row for every value in a C# dropdown either before or after a Pipe character

I am facing a challenge with the custom attribute values for products in my database. To store these values, I save them as a character-separated list using the pipe symbol to separate each size. For instance, let's consider an Orange Dress with a cu ...

c#htmlarraysasp.net

How to assign a class to a dynamically created span in HTML using AJAX and PHP arrays

I'm puzzled as to why this keeps breaking. In my array, I have multiple words stored: $poolOne=array("sparkly","sporty","happy","confident","awesome","funny","awkward","mad","silly","dynamic", "handsome","merry","horrid","funky","loud","chirpy", ...

javascriptphphtmlajaxdraggable

Creating a dynamic background image with automatic cropping techniques: How to do it?

I'm currently working on a custom wordpress theme and I've encountered an issue that I need help with. I want to have a wide background image on my homepage with text centered on it, but I also want the height to remain the same as the browser w ...

cssimagebackgroundresponsive

List with pulldown options

I am trying to implement a drop-down list with bullets using Angular 2, JavaScript, and CSS. Although I have managed to create the drop-down list, I am facing difficulty in adding bullets to the list items. Unfortunately, I have found that jQuery and Boot ...

javascriptcssangular