Is the footer html/css duplicated on a different page and displaying differently?

I have been working on a website and just finished the main page with the header, body, and footer. Now, as I moved on to creating the second page, I encountered an issue. I copied and pasted the code for the header from the main page onto the second page without any problems. However, when I tried doing the same for the footer, it ended up aligning left instead of center. Despite having the exact same code and HTML structure, the alignment seems to be off. I've gone through the code multiple times but haven't been able to identify the problem yet.

CSS Code:

.end_text {
    width: 100%;
}

.bottom_left li {
    float:left;
    list-style: none;
}

.bottom_lmid li {
    float:left;
    list-style: none;
    margin-left: 10px;
    margin-top: 7px;
}

.bottom_lmid li:first-child {
    margin-left: 100px;
}

.bottom_rmid li {
    float:left;
    list-style: none;
    margin-left: 10px;
    margin-top: 7px;
}

.bottom_rmid li:first-child {
    margin-left: 100px;
}

.bottom_right li {
    float:left;
    list-style: none;
    margin-left: auto;
    margin-top: 0px;
}

.bottom_right li:first-child {
    margin-left: 100px;
}

HTML Code:

<div id="footer">
    <div class="foot_bar">
        <img src="../../images/bestfoodservicesweb_24.jpg" width="862"/>
    </div>
  <div class="end_text">
            <ul class="bottom_left">
                <li><img src="../../images/bestfoodservicesweb_34.jpg" width="80" height="26"/></li>
           </ul>
            <ul class="bottom_lmid">
                <li><img src="../../images/bestfoodservicesweb_37.jpg" width="63" height="16"/></li>
                <li><a href="http://www.bestfoodservice.us/contact.aspx"><img src="../../images/bestfoodservicesweb_38.jpg" width="63" height="16"/></a></li>
                <li><img src="../../images/bestfoodservicesweb_39.jpg" width="99" height="16"/></li>
               </ul>
                <ul class="bottom_rmid">
                    <li><img src="../../images/bestfoodservicesweb_41.jpg" width="26" height="14"/></li>
                    <li><img src="../../images/bestfoodservicesweb_43.jpg" width="38" height="15"/></li>
                    </ul>
                    <ul class="bottom_right">
                        <li><a href="http://facebook.com"><img src="../../images/bestfoodservicesweb_27.jpg" width="25" height="25"/></a></li>
                        <li><a href="http://twitter.com"><img src="../../images/bestfoodservicesweb_29.jpg" width="25" height="25"/></a></li>
                        <li><a href="http://linkedin.com"><img src="../../images/bestfoodservicesweb_31.jpg" width="25" height="25"/></a></li>
                    </ul>
            </ul>
        </div>
</div>

You'll need to scroll down to view the footer images

A demo is provided below showcasing how the footer should look like

Demo Here Full Screen Demo

This is how the current layout looks

Demo 2 Full Screen Demo 2

htmlcssfooter

Answer №1

It appears that a tag may have been left unclosed. However, after adding the following code snippet:

#footer{
   width: 860px;
   margin: 0 auto;
}

Everything seems to be functioning correctly now. Check it out on Fiddle.

Answer №2

In the second demonstration, ensure to include the info_body ul element so that the footer can be centered properly.

Furthermore, correct the image tag in Demo1 by ensuring that you close the width definition with a double quotation mark.

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

Showing a section of a DIV inside an iframe

I have implemented an HTML object in the following way: <object id="foo" name="foo" type="text/html" data="mypage.aspx"> </object> However, I do not want to display the entire content of mypage.aspx within the HTML object/iframe. In ...

javascriptjqueryiframehtml

ShadowBox not displaying Vimeo videos

I can't figure out why my Vimeo videos are not appearing in a Shadowbox. I have followed the steps I know to be the simplest, which involve copying the example directly from the github page and then updating the shadowbox paths to match the locations ...

javascripthtmlcssshadowbox

Struggling to get the Hover feature on Link from Material-UI to function properly

I've been attempting to hover over Link from Material UI, but unfortunately, it's not working as expected. The CSS styles are not being applied for some unknown reason, and I can't seem to figure out why. Additionally, the Button class is al ...

cssreactjsmaterial-ui

Database stores line breaks in a structured format

As I work on creating a posts section for my readers, I have encountered an issue. When a user adds a new post, it gets saved into the database in this format: Some say the world will end in fire,<br /> Some say in ice.<br /> From what I’ve ...

phphtmltext

Employing jQuery to add an element as a sibling rather than a child node

I'm having trouble finding the specific functionality I need. My goal is to add sibling DOM elements to a disconnected node. From what I gather, it should be possible with either .after() or .add(), but for some reason both methods are not working as ...

javascriptjqueryhtmlcss

When the Navbar div is set to Position:fixed, it generates empty space on the page

I'm facing the issue of unwanted white space in the center of the page below the Navigation Bar. Despite numerous attempts to remove it, I haven't been successful. Below is the HTML code snippet: html: <!DOCTYPE html> <html> <h ...

htmlcsswhitespace

designing icon buttons

I am interested in adding big buttons with icons to my website. I have images named largebut_hover.png, largebut.png, and icon.png. The icon image is supposed to be displayed inside the light grey background of largebut.png, and when hovering, it should sw ...

css

Change the opacity of a DIV or any other element when hovering over it

I have successfully applied opacity: 1; to a paragraph when hovering over itself. However, I want the opacity to also change when hovering over the header above it. Here is my CSS code: .testH { font-family: impact; text-align: center; font-s ...

htmlcss

Button that triggers HTML Audio play when clicked

Is it possible to have audio play when Button 1 is clicked, but then pause or stop if Buttons 2 or 3 are clicked instead? <a href="#" class="button1">Button 1</a> <a href="#" class="button2">Button 2</a> <a href="# ...

javascriptjqueryhtmlaudio

How to create a fixed header navigation in SquareSpace

If you take a look at my Squarespace website using the Adirondack theme over here: The issue I'm facing is that whenever I scroll on either desktop or phone, the top header area shrinks. Currently, the navigation remains fixed on the screen and the l ...

htmlcss

Tips for sending variable from JavaScript to PHP Page through XMLHTTP

Make sure to review the description before flagging it as a duplicate. In my understanding, the method of transmitting data from JavaScript to PHP is through Ajax Call. This is the situation I am facing: With PHP, I bring forth an HTML page that cont ...

javascriptphpjqueryhtmlajax

The BBCode seems to be malfunctioning

I created a custom BBCode for my PHP website to display tabbed content on a page. After testing the BBCode on a separate webpage and confirming there are no errors, I am facing an issue where the tabbed content is not showing up on the actual posting page. ...

phphtmlbbcode

Arrange the elements within the anchor tag in a vertical line using Angular Material

Is there a way to style the elements within an anchor tag in Angular Material so that they display in a single line? I am looking for the CSS solution to achieve this outcome. This is my current HTML code: <a mat-list-item [routerLink]="['das ...

cssangularangular-material

Strategies for concealing and revealing content within dynamically loaded AJAX data

I am attempting to show and hide data that is loaded using Ajax. $.ajax({ type: "POST", url: "/swip.php", data: {pid:sldnxtpst,sldnu:sldnu}, success: function(result) { $('.swip').prepend(result); } }); This data gets ...

javascriptjqueryhtmlajax

Styling the <div> element to create a unique rotation and tilt aesthetic

Would anyone be able to guide me on how to recreate the tilted style of the header section shown in the image using HTML and CSS? https://i.sstatic.net/mhJWA.png body { margin: 0px; background-color: #FFEF4C; } #header { background-color: #FF35 ...

htmlcss

Tips for showcasing an image prior to uploading within a personalized design input file

I am facing an issue with displaying multiple images inside custom style input file labels before uploading them to the database. Currently, the script I am using only displays one image at a time and in random positions. My goal is to have each image ap ...

javascriptjqueryhtmlcss

Editing text on an Android device - Removing formatting pieces

I've encountered an issue where trying to remove spans from an EditText using EditText.getText().clearSpans() results in strange behavior. Line feeds start appearing as boxes and any newly set spans are misplaced. My question is: Is there a way to cl ...

androidandroid-edittextgettexthtmlredraw

How can I place this ribbon on top of an image in an HTML email to ensure it displays correctly on email clients such as Outlook?

As I delve into my research, it's becoming apparent that achieving this result might not be feasible across all email clients. However, I'm curious to know if there have been any recent developments in the email world that would allow me to repli ...

htmlcssemailoutlookhtml-email

Dynamic Loading of Hovercards using jQuery AJAX

I've been working on integrating jQuery hovercard into our web application, specifically to display HTML content retrieved from an AJAX page when a user hovers over a username link with the data attribute data-toggle="user". Here's what our code ...

jqueryhtmlajax

Various formatting options on GitHub Pages

As a beginner in programming, I recently deployed my first project to github pages. However, I am facing two issues: While the desktop version of the site looks perfect, the cards on the home page appear unseparated on mobile and iPad devices. Despite try ...

htmlcssgithub-pages