The footer div appears distinct on various pages despite being the same

After fixing one issue with the footer div, I seem to have created another problem :)

The footer is currently broken on this page:

You can see that the footer extends across the entire page.

Now, compare it to this page:

On this page, the footer spans the whole width and has larger text.

Below is the CSS styling for the footer that is supposedly used on both pages. However, this might be causing the issue here :)

/* styles for footer */

.footer
{
    padding: 0.5em 0;
    margin: 0 auto;
    margin-bottom: 20px;  
    text-align: center;
    vertical-align:center;
    background: #fff;
    color: #462c1f;
    border: 10px solid #fff;  
}
.footer a, .footer span {
    color: #462c1f;
    font-size:85%;
}
.footer a {
    color: #7E9940;
    font-size:85%;
}

.footer a:hover {
    text-decoration: underline;
    color: #3f6b30;
}

Answer №1

In my opinion, the correct scenario is the second case where the .footer is contained within the .mainBody. You can view it here: .

Contrastingly, in the first case (), the footer is located outside of the main body.

This variance explains the difference in appearance.

The issue does not lie with the CSS itself but rather with the placement of the footer in the HTML document, resulting in styles inherited from other containers.

Answer №2

The alignment of the footer is centered due to its matching width with the main section above, and its lack of any margin or padding affecting its position.

In terms of text size, the footer on this hiking page inherits its font size from the body element, which has a style of font-size: 1em;. On the other hand, the footer on this money-making page derives its text size from div#layout2.content, where the .content class is styled with font-size: 13px;

Answer №3

Perhaps the issue lies in prematurely closing a div element or some other relatively simple mistake. Experiment with adding a </div> tag before and after the footer to see how it affects the layout. Another option is to try removing a </div> tag to observe its impact. The presence of the route overlay could be a factor, but conducting thorough debugging is necessary to determine for sure.

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

managing the action of a form to launch it with the help of facebox

Is there a way to use facebox to display a contact form and have the submit action also open in a facebox? Currently, I can easily open a link in a facebox using the rel attribute, like this: <a href="contact.html" rel="facebox">Contact</a> W ...

Tips for implementing a hover effect on the background color of a Bootstrap navbar

I am having trouble changing the background color of links and social media icons when hovering over them. I've tried multiple solutions found through searching, but none seem to work for me. Could someone please assist me with this issue? Thank you! ...

Guide on utilizing regular expressions to match CSS selectors

Attempting to determine if the head section in jQuery contains the font-weight:bold property within CSS. That particular property may exist in 4 different variations: font-weight:bold font-weight: bold font-weight :bold font-weight : bold Is there a way ...

Ways to show a button on top of an image only when it is being hovered over

I've been inspired by the CSS styles on the website, specifically the tiles that showcase the picture, title, author, link to the author's page, and link to the article for each post. Below is the HTML structure for a single tile: <div clas ...

Personalized navigation bar color while hovering in Bootstrap

I can't seem to figure out the right CSS syntax to customize my navbar links when hovering. Here is my navbar structure: <ul class="nav navbar-nav navbar-right"> <li><%= link_to "Home", root_path %></li> <li cla ...

The ajax call I made is not retrieving any data, only returning an empty array

I am having trouble passing data from JavaScript to PHP through AJAX. Even though I have passed some data, the output is showing as an empty array. Can someone please assist with this issue? <html> <head> <title></title> ...

Submit the form by pressing the "Enter" key within the textarea field

I am attempting to submit a form by pressing the Enter key in a textarea. Here is what I have so far: $('.chatMessage').on('keyup', function(e) { if (e.which == 13 && ! e.shiftKey) { $.ajax({ url: "/index.php", type: " ...

The CSS submenu is appearing below the jQuery UI tabs

On my webpage, I have designed a vertical CSS menu for the left side with submenus, and on the right side, I added jQuery UI tabs (in asp.net). However, the issue is that my submenus are appearing behind the jQuery tabs, as illustrated in the image below: ...

Angular's inline style manipulation fails to function in IE browser

I am facing an issue with setting the position of a div based on the return value of a function in an angular controller Although it works fine in FireFox and Chrome, Internet Explorer is interpreting {{position($index)}}% as a literal string value, resul ...

To trigger a pop-up window displaying a link upon clicking the submit button

I am attempting to create a popup box that displays an application accepted message and a link back to the home page upon clicking the submit button. However, the .popup box is not appearing after validation. This is the content that should be displayed w ...

I recently applied a CSS style to a webform, which is functioning properly on the master page but not on a specific webform

I have implemented CSS on my master page and it is displaying properly, however, when I try to apply the same CSS to a specific web form, the styles are not showing up. Even though I have added the necessary icon code to this web form, the icon is not vis ...

What is the title of this particular CSS method?

I've been implementing a unique approach for more than a year now, and I have yet to come across similar practices elsewhere. Essentially, I am structuring display "states" or "modes" by utilizing CSS classes. Despite searching for terms like "css mod ...

Directing users to a specific section on another webpage can be accomplished using HTML, JavaScript, or

<nav> <div class='container-fluid'> <h1 class='logo'>Logo</h1> <ul class='list-unstyled naving'> <li><a href='index.html'>Home</a></li> ...

Tips for horizontally aligning an item in a flexbox only when it wraps onto a new line

In my layout, I have a container that consists of text on the left and a button on the right. The challenge I'm facing is ensuring proper alignment when they are on the same line versus when the button wraps to a new line on smaller screens. Ideally, ...

PHP causing redirection problems on the list page

Working on PHP and fetched all data from the database to display on a listing page. Trying to show dynamic data in the listing but facing difficulty in redirecting to the listing page. Need help with checking the code. Below is my HTML code: <div clas ...

What is the method for manually setting the page_source in Python3 using Selenium?

Currently, I am developing an application utilizing selenium. My understanding is that the webdriver.Firefox's get method can be used to retrieve a webpage in the following manner: driver = webdriver.Firefox(executable_path=r'geckodriver&apo ...

Tips for arranging links in a vertical layout on a navigation bar that is compatible with every device

I'm having trouble aligning the links vertically in the center of the navigation bar, with the logo overlapping the content. Check out the HTML code below: <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

The MIME type 'text/html' is incompatible with stylesheet MIME type and is not supported

I have exhausted all possible solutions for the issue, from specifying the type for <link rel="stylesheet" href="./style.css" /> to using app.use(express.static('public')), but unfortunately, none of them seem to resolve the problem. index ...

What is the correct way to implement checkbox validations using jQuery?

I have a total of 3 checkboxes that I would like to arrange in a particular order based on their checks. Currently, when one checkbox is selected for download, the logic I have implemented only considers the first checkbox and ignores the rest. I am look ...

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 ...