Create a footer section positioned at the bottom of the webpage

I am facing an issue with my code, which you can find here: http://jsfiddle.net/NSzdm/

The problem arises when I try to place a footer at the bottom of the page. The layout I desire is for the main content wrapper to be centered, but the footer should come after it. However, in my current implementation, the footer is not positioned correctly. You can view all the code on the provided jsfiddle link.

Here is the CSS for the footer:

.footer {
  margin: 50px 0 0 0;
  background-color: #3a3a3a;
  background-image: linear-gradient(bottom, #3b3b3b 0%, #424242 100%);
  background-image: -o-linear-gradient(bottom, #3b3b3b 0%, #424242 100%);
  background-image: -moz-linear-gradient(bottom, #3b3b3b 0%, #424242 100%);
  background-image: -webkit-linear-gradient(bottom, #3b3b3b 0%, #424242 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff3b3b3b', endColorstr='#ff424242',GradientType=0);
  /* IE6-9 */
  width: 100%;
  height: 144px;
}

Answer №1

One possible solution could be to switch from position:absolute to position:relative in the CSS for .wrapper .center {position:relative}.

This adjustment appeared to shift your footer downwards, although it's unclear if this change has any impact on other areas of your webpage without visual references.

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

Determine whether the Bootstrap data-style attribute is enabled or disabled

I have a bootstrap checkbox that I would like to trigger an alert dialog when it is switched off. <div class="row"> <link href="css/bootstrap-toggle.min.css" rel="stylesheet"> <script src="javascript/bootstrap-toggle.min.js ...

Creating a text-filled alphabet design using HTML, CSS, and JavaScript: A step-by-step guide

I have a creative project in mind where I want to design various shapes resembling English alphabets, and each shape should include text. I already have an image file illustrating my idea. My objective is to accomplish this using only html css javascript. ...

What is the best way to position the navbar logo all the way to the left of the screen using Bootstrap?

I need to adjust the position of the logo in the navbar so that it is aligned with the far left of the screen. Currently, it is slightly off-center. I've experimented with various bootstrap classes along with the "navbar-brand" class, but haven't ...

Parallax Effect malfunctioning on iPhones

Hey there, I recently created a parallax UI using pure CSS. It seems to work fine on Android and desktop browsers, but when I tested it on iOS or iPhone, the parallax effect doesn't seem to be working correctly. I'm not sure why this is happening ...

Creating an HTML file element on-the-fly to upload a copied canvas photo, with the canvas image set as the default value

I'm currently experimenting with applying image filters to an image and I want the file element to be refreshed each time a filter is clicked. However, I'm encountering an issue where the file field is returning as null and I can't pinpoint ...

Implementing a clickable image using an anchor tag in JavaScript

I need to enhance my image tag in JQuery by adding an anchor tag alongside it. How can I accomplish this using JavaScript? Here is what I attempted: var imgg = document.createElement("img"); imgg.className='myclass'; $( ".myclass" ).add( "<a ...

Creating a full-width row and columns layout using CSS Flex Box styling

Hello my fellow coding enthusiasts! I'm trying to create a simple box layout using flexbox, but I'm struggling to get it just right. The goal is to have a row with two columns within one container. Here's what I'm aiming for: Essentia ...

Within the mobile view, a button with accompanying description will be discreetly concealed

Working on an ASP.NET Core MVC project, with a FAQ section in the view displayed as follows: <div class="container"> <div class="row "> <div class="col-xl-2 mx-auto d-none d-sm-block"> ...

Can the outcomes be showcased again upon revisiting a page?

Whenever I navigate away from and return to my filter table/search page, the results vanish. I'm looking for a way to preserve the results without reloading the page. Essentially, I want the page to remain as it was originally, with the search results ...

Troubleshooting: Issue with Deleting Table Rows using MySQL and PHP

I am having trouble deleting a table row from my database using MySQL and PHP. Despite reviewing my code, I cannot identify the issue. I believe that I am close to resolving the problem, likely something simple that I am overlooking. When hovering over th ...

Ensure one div scrolls independently while the other remains fixed using Bootstrap

I am currently in the process of constructing a web page with Bootstrap 4. The layout consists of two columns, each contained within individual divs. My requirement is for the content on the right side to be scrollable while the content on the left remains ...

Converting PHP Array to Excel with Unexpected Results

I'm looking for a solution to generate an xls file from a PHP array without using ob_start();. So far, I have been able to send the necessary headers and loop through the data using <table>, <tr>, and <td>. However, when I run this c ...

Error: Attempting to assign a value to the 'firstData' property of an object that is undefined

I am encountering two identical errors in my service. Below are the details of my service and controller: Service code snippet: getData: function (dataRecievedCallback, schemeid, userid) { //Average JSON api averageData = functi ...

What steps do I need to follow to create a unique angular component that allows for customizable width using CSS styles?

The instructions on this website suggest that the width of the side-nav can be changed using CSS like so: md-sidenav { width: 200px; } This leads me to wonder, can I apply standard CSS properties such as width, position, etc... to custom components wi ...

Using React to organize content within a material-ui layout efficiently

Currently, I am developing a React page using material-ui integrated within Electron. The main requirement is to have an AppBar containing Toolbar and Drawer components. To achieve this, I have referred to the source code from https://material-ui.com/demo ...

Adjust the Subnav <li> element to take up 100% width and reposition the dropdown menu

My current challenge involves customizing a navigation bar using CSS. I am struggling with making the sub-menus expand to 100% width as they currently appear fixed in size. Additionally, I am trying to find a solution to display the submenu options on eith ...

Establish a vertical column that matches the height of its parent element

Is there a way to create a column that matches the height of its parent element? I have a navbar followed by a container with three columns. The challenge is to make the last right column the same height as its parent and also scrollable. In this scenario, ...

Trouble with Loading jQuery Files on Beaglebone Server

Working on a wireless robotics project that involves using node.js and jquery to create a webpage "controller". Currently, the code is set up to work with an internet connection because it downloads scripts from internet addresses. The goal is to make it ...

What could be causing the "function undefined" error in my HTML document?

Recently, I developed a small chat application that initially functioned well with all code contained in one HTML document. However, after separating the CSS, HTML, and JS into individual files, an issue arose when invoking the register_popup function from ...

Proper method for adding elements in d3.js

I have a block of code that selects an #id and appends a svg-element into it: var graph = d3.select(elemId).append("svg") .attr('width', '100%') .attr('height', '100%') .append('g') Within th ...