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

Is there a way to instruct the code to select between two variables and align their values?

I have encountered a challenge while working on a unit test. The website I am testing is dynamic, causing the CSS Selector and xpath to frequently change. As a solution, I came up with the idea of using both CSS and xpath to retrieve the same text. Curren ...

c#cssseleniumxpath

Web server experiencing issues with loading scripts and CSS files

After successfully building my project using CodeIgniter on localhost, I encountered an issue when trying to run it on a webhost. The site was functional but the design elements such as scripts and stylesheets were not loading properly. Before uploading t ...

javascriptphpcsscodeigniter

Display a tooltip upon the page's initial load and automatically hide it afterwards

On page load, I want to display a tooltip for a few seconds or hide it when another tooltip is hovered over. I have been trying to achieve this but because my tooltips are nested in multiple divs due to using an Elementor Addon, I am facing some confusion ...

htmljqueryfunctiontooltip

Experiencing challenges with showcasing numerical values in the grid cells

My latest project involves creating an interactive sudoku solver. I've successfully created a grid made up of various elements to resemble an empty sudoku grid. However, my challenge lies in getting the numbers to display within the grid cells. Click ...

javascripthtmljquerycss

What steps can I take to add a horizontal scroll bar and view the entirety of my image?

<img src="the fake.png" width="3268" height="538" class="table" alt=""/> I have a large image that is getting cut off on the page. I need to add a horizontal scrollbar so I can view the entire image ...

phphtmlcssweb

Guide on presenting an image retrieved from a database with ajax

I am currently developing a straightforward mobile application that utilizes a database to store various types of content, including images. I have implemented ajax requests to retrieve this information and display it within the app. However, I am encounte ...

javascriptphphtmljsonajax

Scrolling behavior in two columns with sticky positioning

Both columns have varying heights, with the left sometimes higher than the right. I want them to start scrolling down simultaneously, but when the shorter column's content ends, it should stick to the bottom of the viewport and "wait" until the taller ...

javascripthtmlcssviewportsticky

What is the best way to iterate through multiple iframes?

I need help figuring out how to load one iframe while having the next one in line to be displayed. Is there a way to create a script that cycles through multiple iframes after a certain amount of time? ...

javascriptjqueryhtmlajaxiframe

Facing challenges with parsing JSON files in an Angular 2+ application

Utilizing the Angular CLI, I have configured this project with the standard folder layout. My goal is to practice reading a JSON file from src/app/assets/items.json and then using it to display these items in the HTML. items.json: { "results": [ ...

htmlangularweb-applicationsdependency-injectionsingle-page-application

Using CSS and Vue, you can customize the appearance of inactive thumbnails by displaying them

My goal is for a clicked thumbnail to display in color while the others show as grey. The active thumbnail will be in color, and I want inactive thumbnails to appear in grey. Here is what I am trying to achieve: Vue.component('carousel', { ...

javascripthtmlcssvue.jsvuejs2

How can I add content to the body of a modal in Bootstrap 3?

My application has a button that, when clicked, is supposed to trigger a modal popup containing some data. I want the data in the modal to come from another application via a PHP file accessed through a URL. How can this be achieved? <?php echo '& ...

javascriptphpjqueryhtmltwitter-bootstrap

Display issues with React styled components preventing proper rendering on the screen

Having issues with my style components displaying in a web application I'm developing using React and Ruby on Rails. Everything was working fine until I added a third style component, now even after removing it, nothing shows up on the screen after ru ...

cssruby-on-railsreactjsweb-applicationsstyled-components

Which tag should I use, <b> or <mark>, to emphasize important marketing terms within a paragraph?

Trying to emphasize specific keywords in a paragraph of text can be challenging. I'm currently puzzled about the distinction between the <b> and <mark> tags. These words are highlighted because they play a crucial role in marketing, prompt ...

html

The dark mode class in Next.js/React does not take effect until a local change is made

I've been diving into a helpful tutorial on implementing dark mode toggle in my project. The tutorial uses react-toggle and can be found here. Everything seems to be working fine except for one issue that arises on the initial page load. When the bro ...

htmlcssreactjsnext.js

Why don't media queries take effect

After thoroughly reading all the @media topics on this site, it appears that the code should be functioning correctly. body { background-color: yellow; } @media screen and (min-width: 1080px;) and (max-width: 2000px;) { body { backgrou ...

cssresponsive-designmedia-queriesviewport

Trigger Javascript on 'Nearby' input from Html form

I have a JavaScript code that retrieves the latitude and longitude of users from their device for a local search. Although everything works correctly, I want to make sure the script is only executed if the user specifically selects "nearby" as the locatio ...

javascriptjqueryhtmlformsgeolocation

CSS3 transition applied to a jQuery direction-aware hover effect

I'm encountering difficulties making direction-aware hover and css transitions function correctly. Specifically, I am attempting to create a grid of elements with front and back faces, and on hover, have a css transition that flips the element to disp ...

javascriptjquerycsscss-transitions

Seeking assistance with implementing Styles using the .css() function in Jquery. Any guidance is appreciated

This particular style is exactly what I am looking for. body{ background: url("img/Background_Home.jpg") no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; ...

jquerycssbackground

The getText method in Selenium seems to be malfunctioning as it is unable to retrieve any text content from

Struggling to capture the text of WebElement using two different methods, but both are returning blank strings. // Method 1 d.findElement(By.id("deliveryDate")).getTex(); // Method 2 WebElement deliveryDate = d.findElement(By.id("deliveryDate")); Sys ...

htmlselenium

Python web scraping: Extracting data from HTML tag names

Seeking help with extracting user data from a website by retrieving User IDs directly from tag names. I am utilizing python selenium and beautiful soup to extract the UID specifically from the div tag. For instance: <"div id="UID_**60CE07D6DF5C02A987E ...

javascriptpythonhtmlseleniumbeautifulsoup