The footer looks off-center when zooming in or out

I'm currently facing an issue with the footer on a website.

When viewing it at 100% size (normal size), the footer appears aligned perfectly. However, upon resizing it, the alignment is lost and it shifts to the left instead of staying centered.

Screen capture:

Relevant CSS:

/* Dark blue area above the main part of the footer, stays aligned */
#footerUpper {
    clear: left;
    width: 100%;
    vertical-align: top;
    background-color: #252B76;
    text-align: center;
    color: #FFFFFF;
    margin-top: 30px;
/*  padding: 5px;*/
}

#footerUpper ul {
    padding: 0;
    margin: 25px 0px;
    list-style: none;
}

#footerUpper li {
    display: inline;
    padding: 0 52px;
    font-size: 14px;
    font-weight: bold;
}

#footerUpper li a {
    text-decoration: none;
    color: #FFFFFF;
}

/* Main part of the footer */
#footer {
    float: left;
    width: 100%;
    color: #252B76;
    background-color: #89B0F1;
    padding: 5px;
}

/* Table within the footer */
#footerTable {
    width: 980px;
    margin-left: 150px;
}

Thank you.

htmlcss

Answer №1

It's hard to diagnose the issue without more code or a demonstration of it in action.

One potential solution could be setting a static width on the inner content, such as your "footerTable". Try adding "margin: 0 auto" to center align it, assuming its parent has a width of 100%. Make sure to remove any other margin rules that might be affecting its alignment.

Answer №2

The reason for the issue is that the footer is floated to the left without being contained in a centrally aligned container. To fix this, you have two options:

  • Get rid of float: left and instead use margin-left: auto; and margin-right: auto;
  • Create a container for your footer (or even better, for your entire layout if everything needs to be centered) and center the container by applying margin-left: auto; and margin-right: auto;

There are various ways to center block elements, but these methods are the most effective and recommended.

Answer №3

Considering you have mentioned that there is no need to float the footer:

To resolve this issue, please eliminate the specified styles below:

float: left;
width: 100%;

Subsequently, in order to center the table properly, apply the following style:

text-align:center;

By implementing these adjustments, you will observe the footer expanding to fit the page width, regardless of the zoom level.

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

Troubleshooting problems with Bootstrap datepicker in a Vue project

I am facing a problem with the b-datepicker feature while trying to select a date. The dates are not appearing correctly, as shown in the image linked below. Here is my code: <b-form-group class="my-3" > <b-input-group> ...

htmlvue.jswebbootstrap-4buefy

Troubleshoot: Problem with the name attribute in ASP.NET CheckBox control

When I use a checkbox with the attribute runat="server" in my ASP.NET web application, browsers encounter an issue: Uncaught Syntax error, unrecognized expression: [name=ctl00$ctl00$ContentPlaceHolder1$FormPlaceHolder$CrossFinancing] The ASP.NET code ...

asp.nethtml

Angular 5: Autosuggestion feature functions perfectly in Chrome, experiencing difficulties in Internet Explorer

I have integrated an autosuggestion feature using Angular 5, pulling suggestion values from an API. Here is the HTML Code : <div class="col col-lg-4"> <label for="insuranceCompanyName"> Insurance Company Name </label> ...

htmlangularangular5datalistautosuggest

GSAP also brings scale transformations to life through its animation capabilities

I have an SVG graphic and I'm looking to make four elements appear in place. I've been using GSAP, but the elements seem to be flying into place rather than scaling up. Here's the code snippet I've been using: gsap.fromTo( ...

javascriptcsscss-animationsgsap

Transferring data from a React file to a plain HTML page

What is the best way to transfer information from a React app to a static HTML file? For instance, if I collect data through a form in a React app.js file, how can I then send that data to a basic HTML file? ...

javascripthtmlreactjs

issues with responsive mobile navigation

Greetings! I've been diligently working on a website project for a client, but I have a nagging feeling that I may have overlooked something important. If you'd like to take a look at the small design mockup preview I'm providing for the cl ...

javascripthtmlcssbootstrap-4responsive-design

Display images next to each other with no need for a scroll bar

I'm currently developing a Roulette website and I am struggling to make the roulette animation function properly. I have an image for the roulette wheel, but I need the image to vanish after reaching a certain point and then loop around to the left. ...

javascriptjqueryhtmlcss

Unable to change the color of InputBase component's placeholder in React.js

I've been attempting to modify the color of the placeholder in an inputbase. I came across several methods online and tried implementing them, but none have been successful. Below are the codes I have tried. <InputBase id="input-id&quo ...

javascriptcssreactjs

Triggering an event for a div using Javascript, along with a Rails loop

I have a page showcasing a collection of listings that are displayed on the main page. <% @listings.each do |listing| %> # do something <% end %> Each listing now includes a data-toggle, essentially a button. <a id="chat-menu-toggle" h ...

javascriptjqueryhtmlruby-on-rails

Coloring the entire table as a whole instead of individual cells

I'm struggling with formatting a table that displays roles as "EXISTS" or "MISSING". The issue is that the code I found online to color code the cells is coloring the entire table green, not just the cells with "EXISTS". I'm not very familiar wit ...

htmlpowershell

The vanishing HTML Div with a fixed height

After implementing a navigation bar inside my header container, I noticed that the main_image div with a blue background color disappeared. Despite setting a height for it, the div was nowhere to be seen. Additionally, the welcome_text div seemed to lose i ...

csshtmlheight

Is it time to shake up the location of your Toastr

Recently, I've been working on implementing Toastr from this GitHub repository. While I am able to receive alerts and toasts as intended, I'm running into issues when trying to apply custom options. It seems to only stick to the default settings ...

javascriptjqueryhtmltwitter-bootstrap-3

Modify the drop-down value based on the selection of a checkbox in HTML

Here is the updated version that I am stuck with. <base href="http://skins4device.com"/> <link rel="stylesheet" href="/gasss/css/ghd.css" type="text/css" media="all"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.m ...

jqueryhtml

Utilizing Angular 2+ with the [innerHTML] property to incorporate HTML with added style attributes

I am currently utilizing Angular 2+ [innerHTML] input for inserting HTML formatting that includes style tags. Within my template, the code looks like this: <span [innerHTML]="someVar"></span> In the component file, I have defined: someVar = ...

javascriptcssangular

App script: Extracting HTML form data from a web application

I have been trying to work on a script that involves taking input from an HTML form and processing that data in order to populate a Google Sheet. Unfortunately, I haven't had much success with it so far. Here is the code I have been working on: Index ...

htmlformsgoogle-apps-scriptgoogle-sheetsweb-applications

What is the best way to ensure that any words exceeding the line length automatically move to the next line?

My webpage width is currently set to 100vw and adjusts responsively as the viewport size changes. However, there seems to be a slight issue where certain words overflow without being pushed to the next line, causing a small horizontal scroll: https://i.s ...

htmlcssoverflowword-wrap

I am looking to build an array that can store five numbers inputted by the user. Following that, I want to utilize a for loop to display the contents of the array. How can I accomplish this task?

Looking for help to store 5 unknown numbers in an array and then display them after the user has entered all 5 numbers. Can anyone assist me in creating an array of size 5 and using a for loop to show the numbers? Here is the code I currently have: ...

javascripthtmlarrays

"Provide information, then open a new webpage by clicking on a button. Perform various actions with the form by using type

Is there a way to quickly submit form entries to my database and then automatically redirect to a new page? My current situation requires that submitted information is stored in the DB before directing users to a thank you page, all in one seamless click! ...

javascriptphphtmlforms

Utilizing variables upon the page being refreshed

Is there a way to retain certain data even when the page is refreshed? I have some values stored in an array and would like to keep them without losing them upon refreshing. ...

javascriptjqueryhtml

JavaScript code to read a .txt file

Is it possible to use JavaScript to read a text file directly with the file path provided in the code, rather than selecting the file from an open file window? ...

javascripthtml