The latest div I inserted is not aligning to the bottom of the page

I'm facing an issue with my webpage design. I recently added a new div for the footer wrapper
(class = main_foot), but it's stuck in the top left corner.

Objective: Move the div beneath the div class="main_content"

I have verified that the element's class is correct in the style sheet and position tags, but it refuses to budge.

Hopefully, someone can help identify the problem.
It's the most recent div I inserted.

JS fiddle: http://jsfiddle.net/73mK8/1/

Header.php

<html>

<head>
    <title> Crazy Fat Wrap* </title>
    <link href="../CSS/nav.css" rel="stylesheet" type="text/css">
    <link href="../CSS/normalize.css" rel="stylesheet" type="text/css">
    <link href="../CSS/body.css" rel="stylesheet" type="text/css">
    <link href="../CSS/stylesheet.css" rel="stylesheet" type="text/css">
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <script type="text/javascript"><!--//--><![CDATA[//><!--

        sfHover = function() {
            var sfEls = document.getElementById("nav").getElementsByTagName("LI");
            for (var i=0; i<sfEls.length; i++) {
                sfEls[i].onmouseover=function() {
                    this.className+=" sfhover";
                }
                sfEls[i].onmouseout=function() {
                    this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
                }
            }
        }
        if (window.attachEvent) window.attachEvent("onload", sfHover);

        //--><!]]></script>





</head>

<body>
<div class="solid_banner">
<h1> Crazy Fat Wrap </h1>
...

<main_body content here>

...
        
</body>
</html>

stylesheet.css

.solid_banner {
    width: 100%;
    height: 70px;
    ...
}

.nav_bar {
    ...
}

.space {
    ...
}

...

.main_foot {
    background: #ff7343;
    position:absolute;
    margin: 1915px 15% 0 !important;
    width: auto;
    height: 900px;
    border-radius: 5px;
    box-shadow: 0 0 5px black;
}

Answer №1

Implement the following modifications

Adjust the CSS code snippet as follows:

.feat_head {
    padding: 205px 15%;
    width: auto;
    height: 550px;
    z-index: 30;
    border: 10px solid rgba(0,0,0,.7);
}
.main_content {
    display: block;
    float: left;
    background: #ff7343;
    width: auto;
    border-radius: 5px;
    box-shadow: 0 0 5px black;
}
.main_content_copy {
    width: 45%;
    height: 500px;
    padding: 0 10%;
    display:block;
    float: right;
    vertical-align:top;
    text-align: left;
    margin-top: 100px;
}
.main_foot {
    clear: both;
    display: block;
    float: left;
    background: #ccc;
    width: 100%;
    height: 900px;
    border: 1px solid #F00;
}

Make an adjustment in the HTML code by changing:

<!--        foooter . php begin --- >

to

<!--        foooter . php begin --->

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 advisable to avoid using `&apos;` for escaping single quotes?

According to the insights shared in conversations about the popularity of single quotes in HTML and Jquery embedded quote in attribute, the Wikipedia page on HTML highlights that: The use of the single-quote character ('), as a way to quote an attri ...

Tips on creating a blurred background effect when an HTML popup modal is activated

Whenever I click on a button, a popup window appears. What I want is for the background to be blurred when this popup modal opens. <div class="modal" id="myModal"> <div class="modal-dialog modal-lg"> <div class="modal-content"> ...

Tips on applying a class to a host element using @hostbinding in Angular 2

I've been wanting to assign a class to the host element of my component, and initially I used the host property in this manner: @Component({ selector: 'left-bar', host: { 'class': 'left-bar' }, templateUrl: 'a ...

What is the best way to add "m" to the URL for redirecting mobile devices?

Having already installed a mobile detecting plugin for WordPress, my next step is to create a script that can direct users to the mobile version of the site. My idea is to replicate every desktop page on the mobile subdomain and simply add "m" at the begi ...

Adding a border with vertical padding above and below two floated divs with different heights

Here is some sample markup: <div class="container"> <div class="one">column a<br />column a</div> <div class="two">column b</div> </div> The content in the inner divs can vary in height and is dynamically g ...

Automatically activate a button when it comes into view while scrolling

I am currently working in Joomla, which makes it challenging to create a fiddle, but here is the concept: My website displays a mosaic grid of 12 articles upon loading, along with a 'Load More' button. When this button is clicked, an additional ...

Having trouble with a broken link on your HTML email button?

I'm attempting to add a button to an HTML email that redirects to a link within an href tag. Admittedly, my knowledge of html code is minimal. Here's what I've attempted: <p> <input style="width: 200px; padding: 15px; box-shadow: ...

Stylish Titles with Bootstrap

I have been trying to eliminate the border that is creating the panels Body, but I am encountering some difficulties in locating it. Here is the code snippet for my panel: <div class="panel"> <div class="panel-heading"> <span class ...

Entering a value into an HTML textbox using Awesomium in VB.NET

This code snippet is used to split text from a listbox: For Each Item As Object In ListBox1.SelectedItems TextBox2.AppendText(Item.ToString + Environment.NewLine) Next Dim str As String = TextBox2.Text D ...

The functionality of my website is currently experiencing difficulties when accessed through the Android UC Browser

My website, , is experiencing issues with product loading and the '+' button in the side menu not working on UC Browser. It works fine on other Android browsers like Chrome and Firefox, but I am confused as to why it is not functioning properly o ...

Mastering Bootstrap 4 flexbox for optimal content filling: A comprehensive guide

I am currently working on an angular app integrated with bootstrap 4. The challenge I am facing is related to the layout design. I have a fixed navbar at the top and a content area below it. Within the content area, I have a div that includes header and fo ...

Is there a way to eliminate the transform style from a draggable element?

I am looking to enhance the CDK drag and drop example by adding a preview of the dragged element with specific left and top positions, without utilizing the transform style. HTML <div class="example-boundary"> <div class="example- ...

Seeking out drag-and-drop capabilities using JQuery

My goal is to create a feature where users can drag and drop words from a list into input fields. I want the capability to do this multiple times with the same word, allowing it to be placed in different input fields. This functionality will essentially i ...

Guide to incorporating CSS and JavaScript files in Django using Python

I am currently experiencing issues with loading only static css and Javascript in my Django project. The code I have included is successfully loading image files, but the css and js files are not loading. {% load staticfiles %} <html xmlns="http://ww ...

What could be causing my right-floating elements to shift more towards the left with each occurrence?

After following a todo list tutorial, everything was running smoothly until I decided to add some styling to it. I placed a Font Awesome trash can icon inside a button with the class "remove." Essentially, I removed all the styles from the button, leaving ...

Customizing SVGs for Ion Icons Version 5 in a React Application

I have been using ion icons in React by importing them directly into my index.html. While this method has been working well with the icons from ion icons found here, I know that you can also use custom SVGs by specifying an src attribute in the ion-icon ta ...

The pointer cursor seems to be missing in action

Currently using ReactJS, I have implemented a custom upload image button on my webpage. .upload-btn-wrapper { position: relative; overflow: hidden; display: inline-block; cursor: pointer; } .upload-btn-wrapper input[type=file] { font-size: 10 ...

Artwork expanding incorrectly on HTML canvas

I'm encountering an issue while attempting to draw on an HTML canvas. I've specified 50 circles and multiple lines within a canvas of size 1000x1000 px, but not all circles are appearing as expected. My assumption is that the elements are being ...

Concealing the ellipsis in the will_paginate function of Rails

I'm currently utilizing will_paginate to manage a large number of values, but I am struggling to find a way to hide the "..." portion and the page numbers following it. Here is my current setup: https://i.stack.imgur.com/f2Tt8.jpg However, what I wou ...

Display a specific message in a div when the input field is left empty

My goal is to create a div that mirrors the content of an input field. When I type "lalala" in the input, it should show up in the div, and this part is working fine. However, I also want the div to display "The input is empty" when the input itself is emp ...