Struggling to vertically center a div using the Sticky footer method?

I'm working on implementing the Sticky Footer technique on my website, but I'm running into an issue with aligning my content both horizontally and vertically within the #main section. The problem arises from the fact that the bottom padding is set to padding-bottom: 180px, causing the #main to not line up properly vertically with the footer that shares the same size. If I remove the padding and manually set the height of #main, it works as intended. However, this approach causes the footer to not consistently stay at the bottom of the page. How should I proceed to resolve this dilemma?

To view with padding-bottom: 180px;: this link

To view without padding-bottom: 180px;: this other link

Any assistance would be greatly appreciated!

htmlcss

Answer №1

To start, modify your HTML layout to the following:

<div id="wrap">
    <div id="main" class="block clearfix">
        <div id="wrapper" class="content">
            <p>text</p>
       </div>
    </div>
    <div id="footer"> <!-- footer within wrapper -->
       footer content
    </div>
</div>

Additionally, update your CSS like so:

#footer { 
    position:relative;
    margin-top: 0; 
    height: 180px;
    clear:both;
    background:#FFCC00;
}

This adjustment will keep your footer consistently connected to your content. Take a look at the Fiddle for reference.

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 Animate the Deletion of an Angular Component in Motion?

This stackblitz demonstration showcases an animation where clicking on Create success causes the components view to smoothly transition from opacity 0 to opacity 1 over a duration of 5 seconds. If we clear the container using this.container.clear(), the r ...

javascriptcssangulartypescriptangular-animations

How do I go about configuring the uploaded image?

Here is a sample of my HTML code: <div class="images"> <figure> <button id="upload-add-product" class="icon-plus"></button> <input id="upload-file" type="file" style="display: none;" multiple/> </fi ...

javascriptjqueryhtmlcssupload

focusing on every item within a container

Currently, my code looks like this: $(".container a").css("color","#ffffff"); It styles all links inside the ".container" element to be white. However, I have a div that has the following structure: <div class="container"> <div class="header" ...

javascriptjqueryhtmlcss

Bespoke HTML, CSS, JavaScript, and PHP website designs within the Wordpress platform

I am a beginner in the world of Wordpress, coming from a background of creating websites from scratch. Currently, I am working on a Wordpress template (Astra) and looking to create a custom page using HTML, CSS, JavaScript, and PHP from the ground up to ad ...

javascriptphphtmlcsswordpress

I am facing an issue where my Tailwind classes are not functioning properly when passed through props, but they work seamlessly when I directly link the Tailwind CSS using

//Button.jsx import React from 'react'; const Button = (props) => { let color = props.color || 'blue'; return ( <button className={`px-4 py-2 font-bold text-black bg-${color}-500 rounded-full hover:bg-${color}-700 focus ...

htmlcssreactjstailwind-cssvite

Impact on adjacent div

Within my code, I have two sibling divs that contain additional nested divs as shown below: <div class="btn_lists"> <div class="btn green_btn"> <img src="<?= asset_url() ?>images/escolar_07__1.png" /> </div> & ...

htmlcss

Once the form is submitted, it is not validated and instead just refreshed

<html> <head> </head> <body> <script type="text/javascript" language="javascript"> function isUpperCase(str) { return str === str.toUpperCase(); } function validate() { var flag=0; var x=document.getElementById("f ...

javascripthtml

When using Vue with CSS3, placing an absolute positioned element within a relative wrapper can cause issues with maintaining the

Just starting out with Vue and diving into the world of CSS3! I'm currently working on a component that you can check out here: https://codesandbox.io/s/yjp674ppxj In essence, I have a ul element with relative positioning, followed by a series of di ...

javascriptcssvue.jsvuejs2vue-component

The CSS outline properties vary between input elements and input elements in focus

I'm encountering an issue with a box and its associated CSS outline style. When the box is focused, it should display a blue outline (which is working fine). However, upon form validation, if there is an error, the .error class is added which should c ...

csshtml

Troubleshooting the Height Problem in Bootstrap Divisions

Can someone help me align the height of the alert box with the input field? I've tried using Bootstrap classes but can't seem to get it right. I attempted using col-mb-4 in the alert class, but the height alignment is still off. <link rel= ...

htmlcsstwitter-bootstrapbootstrap-5

Tips for aligning navigation bar items to the right side

Seeking help with positioning the logo on the left and navigation items on the right using Bootstrap classes, while maintaining responsiveness. Click here for sample image 1 Check out the navbar layout <!-- Logo --> <a class="nav ...

htmlcssbootstrap-4frontend

Deciphering specialized file selection in Bootstrap 4

Utilizing bootstrap and referencing this document: <div class="custom-file"> <input type="file" class="custom-file-input" id="customFileLang" lang="es"> <label class="custom-file-label" for="customFileLang">Select File</label> ...

csstwitter-bootstrapsassbootstrap-4

Issue with Firefox browser: Arrow keys do not function properly for input tags in Twitter Bootstrap drop down menu

Requirement I need to include a login form inside the dropdown menu with username and password fields. Everything is working fine, except for one issue: Issue When typing, I am unable to use the arrow keys (up/down) in Firefox. This functionality works ...

javascriptjqueryhtmlcsstwitter-bootstrap-3

Displaying only the div after the link from a table where all divs are shown using jQuery

I'm struggling to figure out how to select the immediate div inside each td and properly load up the page. Each link seems to toggle every hidden div on the page! The table contains hundreds of rows, with each row featuring a visible part - a link - ...

jqueryhtmlhidden

The background image is trapping my text and preventing it from moving forward

As a beginner developer embarking on my first web page project, I've encountered a challenge. The text I inserted into a flexbox refuses to align beneath the image. .title { text-align: center; width: 500px; margin-left: auto; margin-right: a ...

htmlcssspacingblurry

Identifying Internet Explorer version through CSS functionality and feature detection

As of IE10, browser detection tags are no longer supported for identifying a browser. In order to detect IE10, I am utilizing JavaScript and a technique that tests for certain ms prefixed styles like msTouchAction and msWrapFlow. I would like to do the s ...

cssinternet-explorerinternet-explorer-11feature-detection

An element featuring a background color is vertically aligned in the middle of its parent container

Struggling to achieve a seemingly simple task, but coming up short on finding a solution. The goal is to have a background-color that aligns vertically in the middle of the first and last images in a stack of images. It may sound more complicated than it a ...

javascripthtmlcssalignment

Website Responsiveness - inquiries for all needs

My first responsive website project has hit a roadblock, as I struggle to understand how to implement media queries effectively. Here's a snippet of my code... <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/x ...

cssmedia-queries

Steps for retrieving information from a View, transferring it to a Controller, and subsequently forwarding it to another View

Hello everyone! So, I have a situation where I need to pass values from a view using @Html.ActionLink to a controller and then pass them to a new view. I've tried creating a ViewModel that matches the values I need, but when I try to show these result ...

c#htmlasp.netmodel-view-controller

Arrangement of content in three columns with a flex direction set to column

In my current project, I am working on creating a view of items that are mapped using React. The main objective is to set up a 3-column layout with items arranged vertically within each column. Each item panel contains a hidden div element which expands wh ...

cssbootstrap-4flexboxcss-gridmasonry