Footer remains attached after the absolute wrapper is positioned

Question

Footer remains attached after the absolute wrapper is positioned

Is there a way to horizontally center a wrapper without using position absolute?

#wrapper {
    width: 721px;
    height: 720px;
    position: absolute;
    margin: auto;
    top: 136px;
    left: 0;
    right: 0;
    background: white;
    clear: both;
}

The wrapper contains three floated divs, which get messed up when the position is changed to relative.

____________________________________________
header
____________________________________________

         __wrapper____________
         |         |          |
         |         |          |
         |  div1   | div2     |
         |         |          |
         |         |          |
         |         |          |
         |_________|__________|
         |     div3           |
         |____________________|

__________________________________________
footer
__________________________________________

How can I create a sticky footer that always stays at the bottom of the site regardless of content amount?

.footer {
    border-top: 1px solid #dcdcdc;
    max-width: 100vw;
    font-weight: bold;
    text-align: center;
    background: #f0f0f0;
    width: 100%;
    height: 80px;
}

In this JS-FIDDLE, you can see that the footer hides behind the header.

html css footer sticky-footer

Answer 1

Answer №1

Have you considered incorporating bootstrap into your project? By using bootstrap, you can streamline your layout with the following code:

<div class="navbar navbar-fixed-top">
  Your header here
</div>

<div class="row">
 <div class="col-md-3 col-md-offset-3">
   Your first div
 </div>
 <div class="col-md-3 col-md-offset-6">
   Your second div
 </div>
</div>
<div class="row">
 <div class="col-md-6 col-md-offset-3">
   Your third div
 </div>
</div>


<div class="navbar navbar-fixed-bottom">
  Your footer here
</div>

To ensure the navbar fits well on both top and bottom sides, apply the following CSS:

html, body {
  padding-bottom: 55px;
  padding-top: 55px;
}

UPDATE: If you're not utilizing frameworks like bootstrap:

Add this CSS for the footer.

position: fixed;
bottom: 0;

This adjustment will display the footer properly, preventing it from being hidden behind the header.

Answer 2

Have you considered incorporating bootstrap into your project? By using bootstrap, you can streamline your layout with the following code:

<div class="navbar navbar-fixed-top">
  Your header here
</div>

<div class="row">
 <div class="col-md-3 col-md-offset-3">
   Your first div
 </div>
 <div class="col-md-3 col-md-offset-6">
   Your second div
 </div>
</div>
<div class="row">
 <div class="col-md-6 col-md-offset-3">
   Your third div
 </div>
</div>


<div class="navbar navbar-fixed-bottom">
  Your footer here
</div>

To ensure the navbar fits well on both top and bottom sides, apply the following CSS:

html, body {
  padding-bottom: 55px;
  padding-top: 55px;
}

UPDATE: If you're not utilizing frameworks like bootstrap:

Add this CSS for the footer.

position: fixed;
bottom: 0;

This adjustment will display the footer properly, preventing it from being hidden behind the header.

Answer 3

Answer №2

In the realm of modern web development, we have the luxury of utilizing flexbox for creating layouts. Here's a basic example:

<div class="container">
  <div class="flex-container">
    <div class="item1">Box1</div>
    <div class="item2">Box2</div>
  </div>
  <div class="item3">Box3</div>
</div>

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 500px;
}
.flex-container {
  display: flex;
  flex-direction: column;
  align-self: center;
}
.item1, .item2 {
  height: 100px;
  width: 100px;
}
.item1 {
  background-color: blue;
}
.item2 {
  background-color: red;
}
.item3 {
  background-color: green;
  width: 200px;
  height: 100px;
}

To prevent the footer from being impacted, create an additional container around the 'wrapper'.

Try out this layout by visiting: https://jsfiddle.net/wxokadrx/

If you need a refresher on flexbox, check out:

Answer 4

In the realm of modern web development, we have the luxury of utilizing flexbox for creating layouts. Here's a basic example:

<div class="container">
  <div class="flex-container">
    <div class="item1">Box1</div>
    <div class="item2">Box2</div>
  </div>
  <div class="item3">Box3</div>
</div>

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 500px;
}
.flex-container {
  display: flex;
  flex-direction: column;
  align-self: center;
}
.item1, .item2 {
  height: 100px;
  width: 100px;
}
.item1 {
  background-color: blue;
}
.item2 {
  background-color: red;
}
.item3 {
  background-color: green;
  width: 200px;
  height: 100px;
}

To prevent the footer from being impacted, create an additional container around the 'wrapper'.

Try out this layout by visiting: https://jsfiddle.net/wxokadrx/

If you need a refresher on flexbox, check out:

Answer 5

Answer №3

If you prefer not to utilize flexbox, this alternative method may be helpful

It's important to note that absolute positioning is not required to horizontally align a div.

<div id="outer">
 <div id="inner">
 </div>
</div>

<style>
 #outer {
  background-color: green;
 }
 #inner {
  left: 0;
  right: 0;
  margin: auto;
  height: 300px;
  width: 400px;
  background-color: red;
 }
</style>

Check out the code snippet on fiddle https://jsfiddle.net/x2j325n4/

When using floats for inner divs, it can cause the height of the wrapper to collapse. To avoid this, consider switching to display:inline-blocks.

<style>
#header {
    width: 100%;
    height: 50px;
    background-color: pink;
}
#wrapper {
    left: 0;
    right: 0;
    margin: auto;
    width: 60%;
}
#div1 {
    width: 30%;
    height: 400px;
    display: inline-block;
    background-color: grey;
}
#div2 {
    display: inline-block;
    width: 60%;
    height: 400px;
    background-color: red;
}
#div3 {
    width: 100%;
    height: 400px;
    display: inline-block;
    background-color: blue;
}
#footer {
    width: 100%;
    height: 50px;
    background-color: green;
}
</style>
<div id="header">
    Hey, I'm the header
</div>

<div id="wrapper">
<div id="div1">
    First div
</div>
<div id="div2">
    Second div
</div>
<div id="div3">
    Third div
</div>
</div>


<div id="footer">
    Hey, I'm the footer
</div>

Fiddle : https://jsfiddle.net/rjhwxdL5/

If you want your footer to stick to the bottom of the viewport, simply apply position: fixed; bottom: 0; to your footer element

Answer 6

If you prefer not to utilize flexbox, this alternative method may be helpful

It's important to note that absolute positioning is not required to horizontally align a div.

<div id="outer">
 <div id="inner">
 </div>
</div>

<style>
 #outer {
  background-color: green;
 }
 #inner {
  left: 0;
  right: 0;
  margin: auto;
  height: 300px;
  width: 400px;
  background-color: red;
 }
</style>

Check out the code snippet on fiddle https://jsfiddle.net/x2j325n4/

When using floats for inner divs, it can cause the height of the wrapper to collapse. To avoid this, consider switching to display:inline-blocks.

<style>
#header {
    width: 100%;
    height: 50px;
    background-color: pink;
}
#wrapper {
    left: 0;
    right: 0;
    margin: auto;
    width: 60%;
}
#div1 {
    width: 30%;
    height: 400px;
    display: inline-block;
    background-color: grey;
}
#div2 {
    display: inline-block;
    width: 60%;
    height: 400px;
    background-color: red;
}
#div3 {
    width: 100%;
    height: 400px;
    display: inline-block;
    background-color: blue;
}
#footer {
    width: 100%;
    height: 50px;
    background-color: green;
}
</style>
<div id="header">
    Hey, I'm the header
</div>

<div id="wrapper">
<div id="div1">
    First div
</div>
<div id="div2">
    Second div
</div>
<div id="div3">
    Third div
</div>
</div>


<div id="footer">
    Hey, I'm the footer
</div>

Fiddle : https://jsfiddle.net/rjhwxdL5/

If you want your footer to stick to the bottom of the viewport, simply apply position: fixed; bottom: 0; to your footer element

Answer 7

Answer №4

If you're facing layout issues, consider using the clear property in CSS to fix them. In my example, I created a clearfix class for a div element and placed it after .box2:

.clearfix:after {
  content: '';
  display: table;
  clear: both;
}
.clearfix:before {
  content: '';
  display: table;
}

To see this in action, check out the code snippet below (try fullscreen mode):

.header {
    min-width: 720px;
    top: 0;
    left: 0;
    right: 0;
    max-width: 100vw;
    line-height: 80px;
    font-weight: bold;
    text-align: center;
    margin: 0 auto;
    border-bottom: 1px solid #dcdcdc;
    background: #f0f0f0;
    position: fixed;
    width: 100%;
    height: 80px;
    z-index: 1;
}
#wrapper {
    border: 1px solid blue;
    width: 721px;
    background: white;
    margin: 120px auto 40px;
}
.box1 {
    clear:both;
    display: inline-block;
    float:left;
    height:300px;
    width:360px;
    border: 1px solid black;
}
.box2 {
    clear:both;
    display: inline-block;
    float:right;
    height:300px;
    width:350px;
    border: 1px solid black;
}
.footer {
    border-top: 1px solid #dcdcdc;
    max-width: 100vw;
    font-weight: bold;
    text-align: center;
    background: #f0f0f0;
    width: 100%;
    height: 80px;
}
.clearfix:after {
    content: '';
    display: table;
    clear: both;
}
.clearfix:before {
    content: '';
    display: table;
}

<div class=header>
Asdf
</div>
<div id="wrapper">
    <div class="box1"> asdf</div>
    <div class="box2"> asdf</div>
    <div class="clearfix"></div>
</div>
<footer class="footer">
ASDAFASFAFASFSAF
</footer>

I hope this solution resolves your issue!

Answer 8

If you're facing layout issues, consider using the clear property in CSS to fix them. In my example, I created a clearfix class for a div element and placed it after .box2:

.clearfix:after {
  content: '';
  display: table;
  clear: both;
}
.clearfix:before {
  content: '';
  display: table;
}

To see this in action, check out the code snippet below (try fullscreen mode):

.header {
    min-width: 720px;
    top: 0;
    left: 0;
    right: 0;
    max-width: 100vw;
    line-height: 80px;
    font-weight: bold;
    text-align: center;
    margin: 0 auto;
    border-bottom: 1px solid #dcdcdc;
    background: #f0f0f0;
    position: fixed;
    width: 100%;
    height: 80px;
    z-index: 1;
}
#wrapper {
    border: 1px solid blue;
    width: 721px;
    background: white;
    margin: 120px auto 40px;
}
.box1 {
    clear:both;
    display: inline-block;
    float:left;
    height:300px;
    width:360px;
    border: 1px solid black;
}
.box2 {
    clear:both;
    display: inline-block;
    float:right;
    height:300px;
    width:350px;
    border: 1px solid black;
}
.footer {
    border-top: 1px solid #dcdcdc;
    max-width: 100vw;
    font-weight: bold;
    text-align: center;
    background: #f0f0f0;
    width: 100%;
    height: 80px;
}
.clearfix:after {
    content: '';
    display: table;
    clear: both;
}
.clearfix:before {
    content: '';
    display: table;
}

<div class=header>
Asdf
</div>
<div id="wrapper">
    <div class="box1"> asdf</div>
    <div class="box2"> asdf</div>
    <div class="clearfix"></div>
</div>
<footer class="footer">
ASDAFASFAFASFSAF
</footer>

I hope this solution resolves your issue!

Footer remains attached after the absolute wrapper is positioned

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Using multiple conditions in SetEnvIf

The Ajax request appears to be triggered twice, yet all other associated JavaScript functions are executed only once

A guide to accurately accessing form data in Jquery Ajax requests

Guide to extracting HTML content from an AJAX call?

The elements with identical IDs are being superimposed

What is the best method to align a form in three columns from each side without relying on Bootstrap?

Getting the dimensions of an image when clicking on a link

Is it possible to bind browser keyboard scrolling to a div without explicit instructions?

dividing an HTML string into individual variables using JavaScript

Stop the text from wrapping to the full width of its parent when it overflows onto the following line

Guide to Display Three.js Code Suggestions in an HTML Document

Is it possible to automatically adjust the text color based on the dynamic background color?

Contrasts between space and the greater than selector

The ability to use the backspace and Ctrl + c (Copy) functions is restricted in input fields on FireFox

Choosing an option on a WordPress admin page may vary depending on the selection of another

Problem with the hover functionality of the <li> tag

Tips for Creating a Fixed-Width Element

Use Javascript to display an image based on the date, otherwise hide the div

emphasizing the specific text being searched for within the page

Stopping CSS animations at a specific point along the path without using timing functions can be achieved by implementing a targeted