Trouble with centering the footer bar at the bottom using CSS

Hi everyone, I'm having trouble centering my bottom bar on the screen.

<style type="text/css">
body {
background: #fffff;
margin: 0;
padding: 0;
font: 10px normal Verdana, Arial, Helvetica, sans-serif;

}

* {margin: 0; padding: 0; outline: none;}

#bottomBar {
position: fixed;
bottom: 0px;
left: 0px;
z-index: 9999;
background: #e3e2e2;
border: 1px solid #c3c3c3;
border-bottom: none;
width: 500px;
min-width: 500px;
margin: 0px auto;
-moz-opacity:.90;
filter:alpha(opacity=90);
opacity:.90;
}

*html #bottomBar {margin-top: -1px; position: absolute; top:expression(eval(document.compatMode &&document.compatMode=='CSS1Compat') ?documentElement.scrollTop+(documentElement.clientHeight-this.clientHeight) : document.body.scrollTop +(document.body.clientHeight-this.clientHeight));} 
#bottomBar ul {padding: 0; margin: 0;float: left;width: 100%;list-style: none;border-top: 1px solid #fff;}
#bottomBar ul li{padding: 0; margin: 0;float: left;position: relative;}
#bottomBar ul li a{padding: 5px;float: left;text-indent: -9999px;height: 16px; width: 16px;text-decoration: none;color: #333;position: relative;}
html #bottomBar ul li a:hover{ background-color: #fff; } 
a.PDF{background: url(http://www.xxx.com/img/pdficon.png) no-repeat center center; }

</style>

<div id="bottomBar">
<ul id="mainpanel">
    <li style="padding-top:5px; font-family:Arial, Helvetica, sans-serif; padding-left: 5px;">First time here? Be sure to check out the "this" button above or download the PDF here -></li>
    <li><a href="http://www.xxx.com" class="PDF">Download PDF <small>Download PDF</small></a></li>
</ul>
</div>

Thank you!

David

Answer №1

After some research, I discovered the key to success was including this code snippet in my CSS:

left:0;
right:0;

Answer №2

To achieve center alignment, simply delete the left: 0px; line from your CSS code. This specific line forces the division to align itself at the leftmost edge of its parent element. By removing this line and keeping the margin: 0 auto;, the division will automatically be centered on the page.

Answer №3

Give this a shot:

#navigation {
position: fixed;
top: 0px;
z-index: 9999;
background: #f4f3f3;
border: 1px solid #d4d4d4;
border-top: none;
width: 600px;
min-width: 600px;
-moz-opacity:.85;
filter:alpha(opacity=85);
opacity:.85;
margin-left:auto;
margin-right:auto;
left:20%;
right:20%;
}

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

Is it possible for a relative div to automatically adjust its height when the height of the inner absolute div increases?

I am working with the following HTML code snippet: <div id="content"> <div id="leftcol"> <p>Lorem Ipsum</p> </div> </div> along with this CSS styling: #content { width: 780px; padding: 10px; position: relative; back ...

CSS positioning problems thoroughly elucidated

I'm facing two issues that I can't seem to resolve. My goal is to recreate a design similar to the one found at https://i.sstatic.net/XfPqm.jpg. My first issue is with adjusting the box in the header to stay aligned next to my headline tags. The ...

Seamless navigation between pages with quick loading times on a website

In an attempt to showcase my skills in web development on my portfolio, I am aiming to recreate a specific "effect," but my lack of practice in the field has made it challenging for me. I'm hoping someone here can offer me some guidance. My goal is t ...

Implementing a fixed search bar in Angular for a dropdown selection using mat-select

I'm currently utilizing a mat-select widget from Angular-Material in my application To enhance user experience, I am adding a search bar at the top of the select dropdown for filtering options: <mat-select placeholder="Select a store" ...

I am experiencing an issue where the background image is set under the HTML tag, however, I am

As a newcomer to angular, I have experience with HTML, JS & CSS. My goal is to make a background image fill the width of the page and allow scrolling to view the rest of the image since it is taller than wider. In the global stylesheet style.css, I placed ...

Bootstrap causing issues with multinavibar functionality

Hi everyone, I have been using multinavbar but when I view it on mobile, the toggle and menu are not working properly. Below is the code snippet for reference: <div class="navbar navbar-default navbar-static-top" role="navigation" style="height: 114px ...

The animation for the Bootstrap modal is not functioning correctly

Whenever I click the button to open the modal window, it just pops up without any animation or fade effect. I attempted to add classes like .fade and .modal-fade to the modal, but nothing changed. You can see it in action on my test page. Simply click th ...

Styling select input forms with Bootstrap 3

I'm looking to create a select dropdown menu that matches the style of other inputs in a bootstrap 3 form. You can view an example of what I want to achieve on this plunker or see the image below: This CSS code is included in the header: <!-- Boo ...

Unable to assign a value to a variable in JavaScript

Today, I delved into the world of JavaScript and decided to test my skills by creating a page that changes images when clicking on a div. Everything worked perfectly until I wanted to add an input element to specify how many steps to jump each time the but ...

What is the best way to eliminate the Iframe scrollbar while ensuring that the entire page loads?

When I add an Iframe inside the contentArea, two scroll bars appear. I am looking for a way to hide the iframe scrollbar without hiding any of the external website's content. I have tried using the scrollbar="no" snippet code, but it didn&ap ...

CSS: width is functional but height is ineffective

When trying to adjust the width of a div, everything works smoothly, but the same cannot be said for adjusting the height. I attempted to experiment with the bootstrap carousel on codeply, but unfortunately, it didn't behave as anticipated: HTML code ...

Is it feasible to preserve the HTML form content data even after refreshing the page?

Can someone offer a suggestion that doesn't involve using Ajax? I'm wondering if there is a way to achieve this using JavaScript/jQuery or some other method. Here's my issue: When submitting a page, the action class redirects back to the sa ...

Tips for Choosing Two Classes Using CSS

I'm currently exploring ways to select two classes so that when one of them is hovered over, a specific animation will occur. Here is my latest attempt: .news1 { -webkit-filter: blur(3px); filter: blur(3px); -webkit-transition: .3s ease-i ...

Tips for ensuring responsive images do not cause blocks to jump down

How can we address the issue of blocks jumping after an image loads while still maintaining responsiveness? Codesandbox. Key points to consider: The image should resize when the window is resized. The maximum width of the image is its own width. We do n ...

Tips for centering the bootstrap navbar on a page

Utilizing bootstrap, I have designed the following navbar: https://i.sstatic.net/shYC3.png This navbar was created using the code snippet below (Bootstrap version 3.3.5): <body> <nav class="navbar navbar-default"> <di ...

Concealing a Bootstrap table on an ASP.NET MVC View using jQuery

My website is powered by ASP.NET MVC and it showcases records in a Bootstrap 3 table. When there are no records, a div is displayed. Following the advice of another user, I adjusted the view to render the table along with the "no records" div simultaneousl ...

CSS: Adjusting the top margin of a font

I admit, the title of this question may not be the most creative, but I've hit a wall in my search for answers. It seems like I must be missing something fundamental in CSS, or perhaps my search terms are just off. Here's the issue: I have a con ...

Developing my React application with Material UI. The fonts I've implemented don't appear consistent on Mac operating systems

Why does the font change in Mac and iOS platforms, and how can I ensure consistency across all devices? Here is an excerpt from my index.css file: body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto&apos ...

What is the process behind the creation of the class or id fields in HTML for Gmail and Quora? How are these

When using Gmail: <tr class="zA yO" id=":1t4"> While on Quora: <span id="ld_zpQ1Cb_27965"> What is the purpose behind this and what specific tool do they employ to achieve it? ...

Struggling to make the image adapt to mobile screen sizes, even after applying a width of 100% and

After spending countless hours researching online, I still can't figure out how to make the image responsive on mobile devices. On a computer screen, it looks fine: https://i.sstatic.net/sCPbA.png However, when I inspect the element and view the ima ...