Hey guys, I'm working on a website and I'm having some trouble with the footer. It's sticking to the bottom of the page, but the content is overflowing it. Check out this screenshot for reference: .
Here is my HTML/CSS code for the footer: http://pastebin.com/ZKCuBjhn
Thanks for your help!
Edit: Here is the full page code - HTML code: pastebin.com/RAj11cPP --- CSS code: pastebin.com/0kMgb1R2
Just a heads up, the excessive
tags in the code are just there to showcase the issue.
Consider adding clear: both; to the styling of your footer. Seeing the code for the rest of the page would provide more context.
Solution:
Upon reviewing your code, it appears that this modification may achieve the desired outcome: http://pastebin.com/Letx9hPA
I adjusted the position of your footer to fixed in order to keep it at the bottom of the page. If this does not align with your preferences, you can remove the positioning altogether to allow for natural placement.
In addition, I enclosed your content within a dedicated div to incorporate the necessary spacing at the end for proper visibility. The spacer was inserted by applying padding-bottom: 100px, equivalent to the height of your footer.
By setting the div to position: absolute, you're taking it out of the normal flow of the page, causing content to overlap.
If your previous HTML structure has a container like a div wrapping the top section, avoid using "position: absolute". Instead, use width: 100% and margin: 0 auto; The issue lies in the code preceding the footer, not the footer itself.
In the case of a div, make sure to specify a minimum height using min-height. This will allow the content inside to expand without overflowing and pushing the footer down. Avoid using just 'height' as it may cut off overflowing content.
Here's a basic example:
body {
background-color: #d6d6d6;
}
.header {
background-color: #006F8D;
color: #fff;
margin: 0 auto;
width: 600px;
height: 100px;
}
.center {
background-color: #fff;
color: #454545;
margin: 0 auto;
width: 600px;
min-height: 100px;
}
.footer {
background-color: #fff;
color: #454545;
margin: 0 auto;
width: 600px;
height: 50px;
border-top: 1px solid #ccc;
}
For the CSS, here is a simplified version of the HTML:
<div class="header">menu 1 - menu2 - menu3</div>
<div class="center">Content Area</div>
<div class="footer">Footer</div>
If you require absolute positioning for the footer, let me know for further assistance. Also, it's advisable to refrain from using deprecated tags such as font or center in your code.
When I generate links using $_GET [Array] to display in a box, I aim to have 5-10 links per line without any of them appearing on two lines. While I currently use {text-align:justify;} for consistent border spacing, I am seeking a method to prevent the lin ...
I want to style my accordion in a way that it resembles a tree structure. How can I achieve this using CSS? For example: + should be displayed when the accordion tab is closed, and - when the accordion is open. <div class="Accordion" id="systemAccordi ...
Is there a way to use CSS to move the main header navigation, including the logo and links, on my website up when scrolling down in order to hide the top black bar header that contains contact information? The website in question is atm.truenorthmediasol ...
After successfully integrating the datatables on my VF page, I now have one final requirement: to display any negative values in red and bold within numerical columns. In my Salesforce implementation, I am using <apex:datatable> for my table. Each nu ...
I am facing an issue with a draggable div. When I drag the div, the shadow also moves along with it. I want to find a way to hide this shadow while dragging. <div draggable="true" (dragstart)="mousedown($event)" (drag)="dra ...
Hello, I have encountered an issue while using this code for my AJAX JSON request. When attempting to make jsonObj a global variable and then console.log() it, the debugger console shows that it is always coming up as undefined. To explain my question fur ...
Imagine a scenario with three interfaces structured as follows: registration-pivot.ts export interface RegistrationPivot { THead: RegistrationPivotRow; TBody: RegistrationPivotRow[]; } registration-pivot-row.ts export interface RegistrationPivotR ...
This is an ongoing project that includes a calculator and other features. Right now, I am working on a functionality where when you input a number into the calculator results and press "+", it should trigger onClick to check if the input was an integer o ...
I've hit a roadblock while trying to create a css-driven menu in GWT. The menu should be rendered exactly like this: <div class="topbar"> <div class="container fixed"> <h3> <a href="" class="logo">test& ...
I am looking to move my Vue code into an external .js file. Since I am new to Vue, I am trying to keep it simple without using webpack. However, I have encountered an issue where Vue does not work when using the script src tag in the html file. For instanc ...
My website contains a div that is mostly off the page, but on hover it translates onto the main page. You can check out my website. However, this method doesn't work well on mobile devices. Hovering is not effective and I often have to click multipl ...
Having some trouble removing a list item with the click button, I've tried a few options but nothing seems to be working. Can anyone offer assistance? I need to remove a list item from my users array when clicked. Below is the Typescript code and cor ...
My search for Ionic 2 animations led me to some options, but none of them quite fit what I was looking for. I have a specific animation in mind - a "fade" effect between images. For example, I have a set of 5 images and I want each image to fade into the ...
When browsing WebMD on a computer, you'll see one page. However, if you access it from an iPhone, not only will you be directed to their mobile page (which is easy enough), but they also display a special overlay with a "click to close" button prompti ...
In order to enhance security, the loginform.html located in the public folder sends the username and password input by the user to a server route '/login' for authentication. Server-Side Code: var express = require('express'); var app ...
I currently have an rz-slider featured on my webpage that is utilized for gathering the price of a product from the user. In addition to the slider, there are two input fields present which are designated for storing the minimum and maximum values. The ng- ...
As I work my way through the textbook for one of my classes, I am practicing by building an image swapping page. The concept is simple - clicking on a thumbnail swaps out the main image and enlarges it as if it were linking to another web page. Despite fol ...
I've noticed that when I view my website on mobile devices, the tablet media queries always seem to override my mobile media queries. Can anyone explain why this is happening? Here is how I have set it up: /* X-Small devices (portrait phones, less t ...
<ul class="dropdown-menu wm_search_div" ng-show="searchDivShow"> <li ng-repeat="user in searchUserList"> <a href="javascript:void(0);" class="wm_clearfix3"> <img ng-src="{{user.faceIcon}}" class="pull-left wm_se ...
I have developed a function that resizes images to fit as a background image for a div. I provide the function with the div size and the image path. It works perfectly when the height is larger than the width, but it fails when the width is larger than the ...