Move the footer to the bottom of the content

I'm struggling to position my footer directly after the last div on my page, as it's appearing lower than I'd like. Can anyone assist with this issue? Here is the code snippet:

<div id="container">
    <div id="header">
        <h1>
            <a href="#"><img src="tracylogo6header.jpg" alt="Millington and Hope" /></a>
        </h1>
        <h2>
        </h2>   
    </div>
    <ul id="nav">
        <li><a href="index.html">Home</a></li>
        <li><a href="stock.html">Stock</a></li>
        <li><a href="events.html">Events</a></li>
        <li><a href="contact.html">Contact</a></li>
    </ul>
    <div id="box">
            <a href="#"><img src="home4.jpg" alt="Slideshow Image 1" /></a>

            <a href="#"><img src="home6.jpg" alt="Slideshow Image 2" /></a>

            <a href="#"><img src="home4.jpg" alt="Slideshow Image 3" /></a>
    </div>
    <div id="box2">
        <a href="#"><img src="tracylogosmall.jpg" alt="Logo" /></a>
    </div>
    <div id="footer">
        <p class="client">Tel: 0785740&nbsp;&nbsp;&nbsp;&nbsp;E-mail: <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="17637d73727b766772577f78637a767e7b39747839627c">[email protected]</a></p>

    </div>
</div>
html,body
{
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
}

body
{
    background:rgb(171,163,144);
    text-align: center;
    min-width: 600px;
}

#container
{
    margin:0 auto;
    background:rgb(171, 163, 144);
    width:80%;
}   

#nav
{
  border:1px solid #ccc;
  border-width:1px 0;
  list-style:none;
  margin:0;
  padding:0;
  text-align:center; 
   background: -webkit-radial-gradient(circle, rgb(151,143,124),rgb(171, 163, 144));
   background: -moz-radial-gradient(circle, rgb(151,143,124),rgb(171, 163, 144));

}

#nav li
{
    display:inline;
}       

#nav a
{
    display:inline-block;
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
    padding:10px 20px 10px 20px;
    text-decoration:none;
    color:white;
}


...
...

h3
{
    color:white;
    text-decoration:underline;
}       



#container2 {
    clear:left;
    float:left;
    width:100%;
    overflow:hidden;
    background:rgb(171,163,144); /* column 2 background colour */
}
#container1 {
    float:left;
    width:100%;
    position:relative;
    right:50%;
    background:rgb(171,163,144); /* column 1 background colour */
}
#left {
    float:left;
    width:46%;
    position:relative;
    left:52%;
    text-align:left;
    overflow:hidden;
}
#right{
    float:left;
    text-align:left;
    width:46%;
    position:relative;
    left:56%;
    overflow:hidden;
}   

p
{
    color:white;
}

The footer has a large margin after the last div but doesn't seem to be accurately positioned according to what was declared in the code.

Answer №1

To achieve the desired effect, you can relocate your footer from being fixed at the bottom of the screen to outside of the #container div by removing the position: fixed; and bottom: 0 declarations. This adjustment should produce the intended outcome.

Answer №2

As per your request, the following code will ensure that the div is positioned at the bottom of the page:

#footer {
   position:fixed;
   left:0px;
   bottom:0px;
   height:25px;
   width:100%;
   background:rgb(151,143,124);
   border-top:solid 1px white;
}

To adjust the positioning, you can modify the top margin or use the following code to align it right after the bottom div:

#footer {
   position:relative;
   left:0px;
   height:25px;
   width:100%;
   background:rgb(151,143,124);
   border-top:solid 1px white;
}

Answer №3

One way to enhance your #container is by incorporating padding-bottom: 100px; (or any desired value). Your updated style will look similar to this:

#container {
  margin: 0 auto;
  background: #ABA390;
  width: 80%;
  padding-bottom: 100px;
}

Answer №4

Test out this flawless piece of code for keeping the Header and Footer fixed to the top and bottom respectively:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Header & Footer</title>
        <style type="text/css">
            /* Global */
            * {
                margin: 0;
            }
            html, body {
                height: 99%;
            }
            /* Header */
            .container{
                min-height: 100%;
                height: auto !important;
                height: 100%;
                margin: 0 auto -4em;
                width:100%;
                font-family:Segoe UI;
                color:#fff;
            }
            .container-header{
                padding-top:5px;
                padding-left:20px;
            }

            /* Footer */
            .footer{
                background-color:#333030;
                width:100%;
                font-family:Segoe UI;
                color:#fff;
            }
            .footer img{
                padding-left:15px;
            }
            /* Page Content */
            .content{
                height: auto !important;
            }
            .container p{
            font-size:12pt;
            font-weight:bold;
            }
        </style>
    </head>
    <body>
        <!-- Header Div -->
        <div class="container">
            <table width="100%" style="background-color:#333030;color:#FFFFFF;padding:10px">
                <tr></tr>
                <tr>
                    <td></td>
                    <td>
                        <div style="padding-left:100px;font-size:36px;">Header</div>
                    </td>
                </tr>
                <tr></tr>
            </table>

            <!-- Page Content Div -->
            <div class="content">
                Blah Blah
            </div>
        </div>

        <!-- Footer Div -->
        <div class="footer">
            <table width="100%" style="background-color:#333030;color:#FFFFFF;padding:10px">
                <tr></tr>
                <tr>
                    <td></td>
                    <td>
                        <div style="padding-left:100px;font-size:36px;">Footer</div>
                    </td>
                </tr>
                <tr></tr>
            </table>
        </div>
    </body>
</html>

Cheers!!!

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

How to Customize the Size and Color of secureTextEntry Inputs in React Native

When it comes to styling a password input like the one below: <TextInput name="Password" type="password" mode="outline" secureTextEntry={true} style={styles.inputStyle} autoCapitalize="none" autoFocus={true} /> I also ap ...

Populate an HTML table using a JavaScript array containing objects

Greetings, fellow coders! I am new to the coding world and this community, and despite my efforts in searching for a solution, I couldn't find exactly what I was looking for. So, here is my question: I have an array structured as follows: const arr ...

How can you identify dynamically created elements within an AngularJS directive?

I have a directive where I need to target specific DOM elements, some of which are dynamically generated in an ng-repeat loop. If I try to select them directly, I only get the static elements. However, if I delay the selection by, let's say, 500ms, I ...

Making a linked div with background image

I'm attempting to turn the small icons on this particular page () into clickable links. Each icon is contained within its own div, but no matter what I do: <div class="social-btn pinterest"><a href="http://www.pinterest.com/etc.etc.">&l ...

displaying a Google Map within a designated container

I'm currently working on a basic website layout that consists of a full-width banner, a left menu (200px), and right content (600px). I have a simple jQuery script set up to load the content on the right-hand side when any of the five menu items are c ...

What's the deal with this occurrence? The width of the HTML window seems

Exploring different html markup and layouts, I stumbled upon this JSFiddle: http://jsfiddle.net/vLJAq/15/. I made some modifications to it, but one thing that puzzles me is why the green box disappears when the window width is reduced? Here's the cod ...

Is it possible to manipulate an image tag's image using only CSS?

Is it possible to hide an image from the src attribute of an <img> tag and instead set a background image on the tag using CSS? One idea could be adjusting the positioning or text-indent of the actual image to move it out of view, and then applying ...

Mistake in the hovering positioning within the WordPress theme

I've encountered a hover issue on my website that I'm trying to resolve. Every time I hover over a product, the product description appears underneath it instead of on top, and I can't seem to find a solution: The site is using the sentient ...

Ways to eliminate HTML elements from one HTML content to another

The HTML code provided is as follows: <dl class="item-options"> <dd class="truncated" style="color:red;">DSOX3000-232, RS232/UART Serial Decode and Trigger - in <a onclick="return false" class="dots" href="#">...</a>/&l ...

Database function call is not producing any results

Initially, the code below was intended to create a new user when starting the quiz, but now it is meant to update an existing user's details. However, I am facing an issue where the addUser() function is not completing as expected even though all inpu ...

Ways to establish the gradient

Here is the code snippet I am currently working with. .imgcol1 { background-image: url(https://picsum.photos/200/300); background-repeat: no-repeat; background-size: cover; height: 190px; width: 520px; } .col1 { margin: 75px; } .grad { b ...

Why should one incorporate semantic markup into their HTML documents?

During my studies, I learned that tags provide a definition to content in HTML. For example: <section>It's a section</section> <article>It's an article</article> By correctly using semantic markup in my HTML, the documen ...

Is there a way to keep this table fixed in place as the user scrolls?

Is there an alternative way to fix the content on the header so that it remains visible on the screen until the next table, even when scrolling? I've tried using position: sticky and top: 0, but the header still scrolls past. I have checked for any ov ...

Struggling to unlock the mystery of a jammed trigger box

I'm currently working on implementing a small 'trigger box' that will expand upon clicking. It was functional before, but it seems to be encountering an issue now and I'm unsure of the cause. While I have some understanding of HTML and ...

Is there a way for me to retrieve the value from an input, round it up to the nearest even number, and assign it to a new variable?

I am working on a project that involves two text boxes and a drop-down menu for providing rates. The values in the text boxes are given as inches. I want these inputs to be taken as values, rounded up to the next even number, and then set as variables. How ...

Emphasizes the P tag by incorporating forward and backward navigation options

My goal is to enable users to navigate up and down a list by pressing the up and down arrow keys. For example, if "roma" is currently highlighted, I want it to change to "milan" when the user presses the down arrow key. Here is the HTML code I am working w ...

CSS Layout - Float: What's floating to the top?

Are there any CSS techniques available to make floated blocks fill in both upwards and in their float direction? For example - https://i.sstatic.net/uo06B.png Instead of - https://i.sstatic.net/oEijA.png I know this can be achieved using JavaScript li ...

What is the best way for me to automatically square a number by simply clicking a button?

How do I create a functionality that multiplies a number by itself when a specific button is clicked? I want this operation to only occur when the equals button is pressed. I have been attempting to set this up for over an hour without success. My current ...

"Struggling to make the 'overflow: hidden' property work for an absolutely positioned

I'm struggling to conceal an absolutely positioned image within a CSS grid layout. Below is the code snippet: HTML: <div class="relative-parent"> <div v-for="item in 12" class="hiding-parent"> <div c ...

Unusual Actions from the Text Field

Please take a look at this link <div id="textarea_wrapper"> <textarea>How and where is my width derived from?</textarea> </div> #textarea_wrapper{ height: 250px; border:thick solid green; } textarea{ background-color: #930; ...