Need to stick this table to the bottom of the page

HTML & CSS
1

Hey all. I need to stick this footer table to the bottom of my page. As you can see its at the top and I cant seem to figure out how make it stick to the bottom, any help? Thanks!

Heres the current code I have, along with a screenshot of the page involved

1899Ă—845 43.1 KB

2

You really shouldn’t be using tables for layout in 2018!

3

what should I be using?

4

Do a search in this forum for “sticky footer”. You will find quite a few very informative discussions about making the footer stick to the bottom of the page (using the proper structure for the html too, not using tables).

1 Like
5

Do you want a sticky-footer or a fixed positioned footer?

Here’s an old sticky footer of mine that is responsive (use the flexbox version if only modern browser support is required).

6

Your using display:table; which was given in your other thread.

It’s not the same as html tables which are for data.

You’ll be fine with display:table on your footer :slight_smile:

The sitcky footer version Paul gave above will work well for placing the footer at the bottom.

1 Like
7

Oops. I must be losing it!

1 Like
8

The sticky footer will keep the footer in the viewport when the page has minimal content. Then as content exceeds the viewport height it will push the footer down like a normal footer.

If you are wanting the footer at the bottom of the page at all times then you would need a fixed footer. Use with caution though as it can obstruct other content if that content is not padded out to account for the footer height.

For a position fixed footer just wrap your existing footer in a new div and fix that new div.


<div class="fix-bot">
   <footer>

   </footer>
</div>

.fix-bot {
   position:fixed;
   bottom:0;
   left:0;
   right:0;
}

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Fixed Position Footer</title>
<style>
.fix-bot {
   position:fixed;
   bottom:0;
   left:0;
   right:0;
}
footer {
   display:table;
   width:100%;
}
.left, .right {
   display:table-cell;
   text-align:center;
   padding:30px 0;
}
.left {
   width:70%;
   background:#53352f;
   border-right:2px solid green;
}
.right {
   width:30%;
   min-width:180px;
   background:#684d48;
}
footer img {
   display:inline-block;
   vertical-align:middle;
   margin:5px 3px;
   background:#eef;
}
</style>
</head>
<body>

<div class="fix-bot">
   <footer>
      <div class="left">
         <img src="email.png" class="emailicon" width="40" height="30" alt="">
      </div>
      <div class="right">
         <img src="insta.png" class="instaicon" width="40" height="30" alt="">
         <img src="fbicon.png" class="fbicon" width="40" height="30" alt="">
         <img src="twitter.png" class="twittericon" width="40" height="30" alt="">
      </div>
   </footer>
</div>

</body>
</html>
2 Likes
9

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.