Remove the footer from the main section

I'm facing an issue with the web page layout of my website. Here is a snippet of the structure:

<body>
<div class="container">
   <div class="sidebar">
   </div>
   <div class="content">
   </div>
</div>

<div class="pre-footer">
</div>
<div class="footer">
</div>
</body>

Here is the CSS styling being used:

body  {background:#eaeaea url('../images/bg/sfere.jpg') no-repeat top center fixed;}
.footer {float:left;width:100%;height:67px;background:url('../images/bottom.png') bottom center;bottom:0px;left:0px;}
.container{padding-top:5px;margin-left:100px;margin-right:auto;}
.sidebar {float:left;width:220px;min-height:610px;text-align:center;}
.home {margin:178px 0 0 100px;padding:0 10px 0px 10px;width:800px;float:left;}
.pre-footer {float:left;width:98%;height:100px;position:relative;background:url('../images/pre-footer.png') bottom center;left:15px;bottom:-32px;}

Although all elements are displaying correctly in the layout, there is an issue when the container's height is less. The footer elements end up below the container instead of staying at the bottom as intended. Similarly, setting a fixed height for the footer doesn't solve the problem as on browser resize, it still sticks below the container.

How can I fix this problem?

htmlcss

Answer №1

To keep your footer in place, consider using a fixed position.

div.footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    max-height: 50px; /* adjust this value as necessary */
}

Additionally, add a bottom padding to the body to ensure content remains visible while scrolling.

body {
    padding-bottom: 50px; /* set this equal to the max-height of your footer */
}

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

What is the best way to animate the scaling of a CSS property using jQuery?

I need help creating an animation where a circle div with the class of "bubble" grows from nothing to its full size when a button is clicked using jQuery. I am currently facing difficulties in making it work properly. Here's my current code snippet: ...

javascriptjqueryhtmlcssjquery-animate

HTML5 Drag and Drop: How to Stop Drag and Drop Actions from Occurring Between a Browser and Browser Windows

Is it possible to restrict HTML5 Drag & Drop functionality between different browsers or windows? I am currently working on an Angular2 app that utilizes native HTML5 Drag and Drop feature. Is there a way to prevent users from dragging items out of th ...

javascriptangularhtmldrag-and-drop

The functionality of Jquery is successfully integrated into a specific function, however it seems to only work for one of the calls. To make the other call work,

After a user makes a selection, I am attempting to reset the 'selected' item. This process calls the Vue function tS() shown below. The issue lies with the first call $('#sel1').prop('selectedIndex',0);, as it only seems to wo ...

javascriptjqueryhtmlvue.js

I require the CheckBox to be repositioned slightly lower

https://i.sstatic.net/xIi8m.png I'm trying to center align the checkbox between the Input and Button elements. I attempted using the "align-center" class in the "form-check" div, but it didn't work as expected. Could someone please provide me wi ...

htmlbootstrap-5

Navigate to specific element from bootstrap navigation bar

I am in the process of creating a website for a small organization. The website is being constructed using bootstrap 4, and there is a navbar that connects to various flex-containers. I want these connections to smoothly scroll to their respective elements ...

javascripthtmlcsstwitter-bootstrap

Is it possible for comments in HTML and CSS to cause issues with rendering?

Could HTML or CSS comments potentially lead to rendering issues? HTML Comment Example: <!-- additional details --> CSS Example: /* more information */ ...

htmlcsscomments

Animate text and div elements with bounce or fade-in effects when they appear on the screen in a React application

Animating the elements of my website is a simple task for me, however I am looking to have them animate only when they are visible on the screen without relying on pixels or offsets. I want the animations to be responsive, even in phone mode, without hav ...

cssreactjsanimationwow.js

Capture line breaks from textarea in a JavaScript variable with the use of PHP

I need help with handling line breaks in text content from a textarea. Currently, I am using PHP to assign the textarea content to a Javascript variable like this: var textareaContent = '<?php echo trim( $_POST['textarea'] ) ?>'; ...

javascriptphphtml

"How can I adjust the height of a Bootstrap column to match the height of its neighboring column

In my Bootstrap 4 layout, I have set up two columns... The left column contains three cards in columns The right column has a list group The content in the list group is longer than that of the cards on the left side. Is there a way to make the height ...

htmlcsstwitter-bootstrapbootstrap-4

Tips for circumventing the use of the '&' operator in string manipulation

Here is the code snippet I am having trouble with: <?php $agentId = "LLM002"; echo "&&" . $agentId; ?> Instead of the expected output &&LLM002, I'm getting &<M002. It seems like there might be a conversion error ...

phphtml

NodeJS for CSS Parsing and Selecting

Can anyone recommend a NodeJS library similar to https://github.com/alexdunae/css_parser? I have tried using https://github.com/visionmedia/css, but it doesn't fulfill all my requirements. For example, when I parse the following CSS: .behavior1 {co ...

cssnode.js

Failure to update content with new text in Ajax when GET/POST variables are included

I've been following a tutorial on Ajax functionality, and I have set up my code exactly like mmtuts. However, the new value isn't displaying until I make an adjustment to my test.js file: The original code that is not functioning as expected: $ ...

jqueryhtmlajax

Dynamic fields added using JavaScript are not recognized by PHP

I have a MySQL database where orders are stored along with various activities. My PHP/HTML page retrieves these activities when an order is clicked and allows users to modify them using a form. Upon submission, another PHP file updates the database by loop ...

javascriptphphtmlmysql

To ensure that any changes made to data are reflected automatically when viewing data in Angular 2

In the process of developing an Angular 2 application, I encountered a scenario that requires special attention. The data displayed on the view is fetched from an API, with certain fields being editable by the user. These modifications can be saved using ...

htmlangularview

The HTML and body elements do not possess a width of 100% within the document

When viewing my portfolio site on smaller screens such as 425px and below, there is a white gap on the right side. This issue arises because the HTML and body elements do not inherit full width by default. Do you know why this happens and how I can resol ...

htmlcss

Elements resize based on their parent's and siblings' widths

I have organized the parent div and its three children divs. Presently, the third child is concealed. I've designated the width of the first child as 20% and desire for the second child to automatically take up the remaining width without explicit set ...

htmlcss

Closing WebSocket connection after sending data

I came across an interesting blog post titled Experimenting with Node.js and decided to try setting it up on my own using the author's provided gist. Unfortunately, I encountered some issues. After further investigation, I discovered that even though ...

javascripthtmlnode.jswebsocket

Angular Recursive Bootstrap Breadcrumb Guide

I am looking to implement the bootstrap breadcrumb component (https://getbootstrap.com/docs/4.0/components/breadcrumb/) in my project. My goal is to use the breadcrumb to show the entire path to the current directory within a component that resembles a di ...

cssangularbootstrap-4

What could be causing my <UL> to not properly expand around the <LI> items inside of it?

I am currently working with WordPress and have created a menu using a list structure. Here is an example of how it looks: <ul> <li>Home</li> <li>About</li> <li>ParentItem <ul> <--- The heig ...

htmlcsswordpresshtml-lists

After a slight delay, the animated element twitches into action

I am currently working on implementing a menu item behaviour in the header similar to the one found at: . On this webpage, there is a bar that slides back and forth when hovering over elements. However, I am unable to add another element to my header, so I ...

cssanimationcss-transitionstransitionpseudo-element