HTML footer/Div positioning

Question

Possibly a bit of a simple problem, but currently trying to create a personal website with a banner/header with the menu in, which works fine, and a footer bar. Both are using div's with a 'main' div in between for the main content. For some reason, the footer bar appears on top of the menu/header bar, covering it when I am trying to get it below the main section, and for it to stay at the bottom of the page.

@font-face {
  font-family: "cicle-gordita";
  src: url("fonts/Cicle_Gordita.ttf") format("truetype");
  src: url("fonts/Cicle_Gordita.eot") format("opentype");
}
body {
  left: 0;
  margin: 0;
  overflow: hidden;
  position: relative;
  background-color: #FFFFFF;
}
#banner {
  height: 50px;
  width: 100%;
  margin: 0px;
  padding: 0px;
  overflow: hidden;
  position: fixed;
  background-color: #000000;
  /*background-image: url("images/menuHor.png");*/
}
.menuBit {
  height: 40px;
  width: 100px;
  margin: 0px;
  padding: 0px;
  float: left;
  margin-left: 10px;
}
.menuContent:hover {
  text-decoration: underline;
  cursor: pointer;
}
.menuContent {
  font-family: "cicle-gordita";
  font-size: 30px;
  text-align: center;
  padding: 0px;
  margin: 0px;
  margin-top: 10px;
  color: #ffffff;
}
.main {
  position: fixed;
  margin: 0px;
  margin-top: 50px;
  padding: 0px;
  width: 100%;
  height: 90%;
  background: #ff0000;
  overflow: hidden;
}
#footer {
  width: 100%;
  background: #000000;
  height: 50px;
  position: fixed;
  clear: both;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Personal - Home</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="script.js"></script>
  <link rel="stylesheet" type="text/css" href="theme.css">
</head>

<body>
  <div id="banner">
    <div class="menu">
      <div class="menuBit">
        <h2 class="menuContent">HOME</h2>
      </div>
      <div class="menuBit">
        <h2 class="menuContent">BLOG</h2>
      </div>
      <div class="menuBit">
        <h2 class="menuContent">WORK</h2>
      </div>
    </div>
  </div>

  <div class='main'>
    <!-- Content Here -->
  </div>
  <div id="footer"></div>
</body>

</html>

As shown in the head, I have a jscript/jquery file but all that contains is a small piece of code to fade the main in when the page loads, it doesn't change anything.

I don't know if this is the issue but you're setting the height of `.main` to `90%` while the others are fixed, I think the sum of heights should be `100%` — niceman, Oct 24 '16 at 19:02
I'd suggest not using `position: fixed;` on both your body and your footer. Before diving deeper into this, please consider rethinking the foundation! — Tyler Roper, Oct 24 '16 at 19:03
this isn't relative to the question but consider using html5's semantic elements for the header,footer,main — niceman, Oct 24 '16 at 19:08
Possible duplicate of [Make div stay at bottom of page's content all the time even when there are scrollbars](http://stackoverflow.com/questions/8824831/make-div-stay-at-bottom-of-pages-content-all-the-time-even-when-there-are-scrol) — Heretic Monkey, Oct 24 '16 at 19:08
@MikeMcCaughan I don't agree :) the OP doesn't want the div to be fixed — niceman, Oct 24 '16 at 19:09
@niceman Thanks for pointing out the sizes, wasn't quite thinking properly on that front and in terms of using the html5 elements, I would however they don't work on all versions of browsers, as some older browsers have difficulty with it — Toby King, Oct 24 '16 at 19:11
@TobyKing you can use html5shiv for that, also there are polyfills for html5's various apis in Modernizer's github wiki — niceman, Oct 24 '16 at 19:13

score 2 · Answer 1 · answered Oct 24 '16 at 19:02

2

Add bottom: 0; to #footer

The default is top: 0;

answered Oct 24 '16 at 19:02

Pat

2,540
1
21
28

niceman · Answer 2 · 2016-10-24T19:12:27.853

#footer {
    position: fixed;        
}

The position property when set on fixed will make the element stay in a fixed position no matter how you scroll, the position where it's "fixed" is determined by top or bottom,left or right properties.

If you want it to be positioned "normally" then remove the position: fixed property and you're set.

If you do want it to be fixed then you can follow Pat's answer.

HTML footer/Div positioning

2 Answers2