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.
I'm looking for a solution where I can display a long two column table in a three-column page layout. The table should seamlessly flow from one column to the next, maintaining its headers throughout. Current attempts show the entire table in just one ...
I'm struggling with a stacked list that involves floating an image (icon) alongside text. The constant need to clear after each list item is becoming cumbersome. Anyone have any suggestions for making this more streamlined and tidy? <ul> < ...
I've been following a tutorial guide on this specific website , but I'm encountering some difficulties despite following the exact steps outlined. Can someone provide guidance? Here is what I have done: <html> <script> fu ...
Currently, I am utilizing Vue.js and Nuxt for my web development. One issue I am facing is related to anchors. Specifically, when I navigate to mysite.com/page1#section1, I want the page to scroll to section1. In my code, I have the following snippet: < ...
In my JavaScript code, I am trying to display a video along with a countdown timer. Once the countdown finishes, it should switch the content of the div to show a question. Below is my current implementation: <script type="text/javascript"> ...
Why can't I rotate the © character? Am I missing something? .copy { font-size: 12px; font-family: Arial; writing-mode: vertical-rl; text-orientation: mixed; transform: rotate(180deg); } <span class="copy">© This is not ...
Currently, I have an HTML form embedded in the view and I am looking for a way to automatically populate specific input fields with json variables obtained from the server. Instead of manually writing JavaScript code for each field, my goal is to access th ...
My programming journey involved creating a code snippet that automatically scrolls paragraphs horizontally, giving it the appearance of "Breaking News" updates on popular websites. The Javascript script I implemented performs automatic scrolling, but once ...
I have a list of data that displays in a Collapse, and I want it to highlight for every user click in the list, but only one at a time should be highlighted. If you'd like to see a sample to better understand this concept, please check out: https:// ...
Currently, I am working on a project that involves multiple spans placed side by side, with each span containing a letter of the text. My aim is to create a functionality where hovering over one of these spans will not only hide that particular span but al ...
I am in the process of creating a web application with the help of Wicket. While the majority of the website is generated dynamically through Wicket, I have a specific section that needs to function as a standalone "static" html website. Essentially, this ...
Is it possible to prevent a user from clicking twice on an input tag button with type submit? I attempted using ondblclick="javascript:void(0)", but it did not work. My code is within an Html.BeginForm, not a form element tag. Thank you in advance for al ...
I have created a user class and required interfaces as outlined below: user.ts import { Role } from '../auth/auth.enum' export interface IUser { _id: string email: string name: IName picture: string role: Role | string userStatus: b ...
I am currently working with two HTML tables and two sets of JSON data. Initially, I load one table with the tableData which has a default quantity of 0. In my HTML form, there are three buttons - save, load draft, and edit. Upon clicking on load draft, I p ...
I am currently working on a website that will be dynamically displayed in both English and Spanish. One issue I have encountered is that the longer words in Spanish are causing the navigation bar to spill onto a second row. For more details, please visit: ...
For a small project, I have various news items that need to be included from the "news_all.php" file into table data within the "dashboard.php" file. Due to the predefined root structure restrictions, using include('news.php') is not an option. I ...
While my website functions properly on Internet Explorer, I encounter an issue when trying to open it on Firefox. Instead of opening the page, Firefox prompts me to download the file and opens the Download File dialog. This problem also occurs at times in ...
I've been attempting to create basic jQuery play/pause buttons for an HTML5 video, but when I click on them, nothing seems to happen. If you have any code that could help with the play/pause functionality, I would greatly appreciate it. Here is the c ...
I am attempting to implement in-browser sorting for my flexigrid. Currently, the grid is displaying data from a static XML file exactly how I want it, but the table itself does not sort because it is working off of local data. While researching solutions, ...
Is there a way to adjust the font size in HTML so that when I resize the window, the text size adjusts accordingly? It's like setting a percentage for the text based on the size of the container it is in. Let me provide an example of what I have in m ...