CODEWITHSUNDEEP
htmlcss
user153923
user153923

Reputation:

CSS Footer following Main

I have problems getting CSS to work, especially when it comes to footers.

I have a main body that I would like to keep separated from the footer. Picture a box with the content, a small blank space below that (called "prefoot" in my CSS), and a footer area at the bottom of the page.

I don't really need a sticky footer that hovers over the content (though that is what my example currently does).

Ultimately, I do not want "prefoot" to show. I just want it there as padding between <div class="main"> and <div class="footer">.

How do I get "footer" to be at the bottom, get "prefoot" to sit just on top of it, and get both of those to end after "main"?

body {
    color: #999999; /* silver */
    background-color: #004392; /* dress blues blue */
    font-family: sans-serif, monospace;
    text-shadow: 1px 1px 1px rgba(0,43,92,80);
}
div.main {
    position: absolute;
    left: 100px;
    width: 80%;
    overflow:auto;
}
.prefoot {
    display: block;
    background-color: gold;
    position: fixed;
    left: 50px;
    height: 20px;
    bottom: 30px;
    width: 80%;
}
.footer {
    display: block;
    background-color: red;
    position: fixed;
    left: 50px;
    height: 20px;
    bottom: 10px;
    width: 80%;
}
<body>
    <div class="main">
        <h1>Body Ends at Prefoot</h1>
        <ul>
            <li>Lorem Ipsum</li>
            <li>Lorem Ipsum</li>
            <li>Lorem Ipsum</li>
            <li>Lorem Ipsum</li>
            <li>Lorem Ipsum</li>
            <li>Lorem Ipsum</li>
            <li>Lorem Ipsum</li>
            <li>Lorem Ipsum</li>
            <li>Lorem Ipsum</li>
            <li>Lorem Ipsum</li>
            <li>Lorem Ipsum</li>
            <li>Lorem Ipsum</li>
            <li>Lorem Ipsum</li>
            <li>Lorem Ipsum</li>
            <li>Lorem Ipsum</li>
            <li>Lorem Ipsum</li>
            <li>Lorem Ipsum</li>
            <li>Lorem Ipsum</li>
        </ul>
        <img src="http://i.imgur.com/3DRalRX.gif" />
    </div>
    <div class="prefoot">
    </div>
    <div class="footer">
        Created 11 Sept 2015 (Remember 9/11!)
    </footer>
</body>

Upvotes: 3

Views: 59

Answers (2)

Allen
Allen

Reputation: 304

If you want some gap between content and footer then use these css 

  body {
  background-color: #004392;
  color: #999999;
  font-family: sans-serif,monospace;
  margin: 0;
  text-shadow: 1px 1px 1px #002b5c;
   } 

                                                                              div.main {
  left: 100px;
  overflow: auto;
  position: relative;
  width: 80%;
   } 

.footer {
  background-color: #ff0000;
  bottom: 0;
  display: block;
  height: 20px;
  left: 50px;
  margin-top: 50px;
  position: relative;
  width: 80%;
   }

Upvotes: 1

Callan Heard
Callan Heard

Reputation: 727

The reason the footer is hovering over the content is because your content is position: absolute; and the footer is position: fixed;. This will cause neither of the elements to affect the other's position, meaning the footer won't simply 'flow' after the content; whilst the footer is also set to remain in a 'fixed' position on the screen. Try something like:

body {
    color: #999999; /* silver */
    background-color: #004392; /* dress blues blue */
    font-family: sans-serif, monospace;
    text-shadow: 1px 1px 1px rgba(0,43,92,80);
}
div.main {
    left: 100px;
    width: 80%;
    overflow:auto;
}
.footer {
	margin: 50px;
    display: block;
    background-color: red;
    left: 50px;
    height: 20px;
    bottom: 10px;
    width: 80%;
}
<body>
    <div class="main">
        <h1>Body Ends at Prefoot</h1>
        <ul>
            <li>Lorem Ipsum</li>
            <li>Lorem Ipsum</li>
            <li>Lorem Ipsum</li>
            <li>Lorem Ipsum</li>
            <li>Lorem Ipsum</li>
            <li>Lorem Ipsum</li>
            <li>Lorem Ipsum</li>
            <li>Lorem Ipsum</li>
            <li>Lorem Ipsum</li>
            <li>Lorem Ipsum</li>
            <li>Lorem Ipsum</li>
            <li>Lorem Ipsum</li>
            <li>Lorem Ipsum</li>
            <li>Lorem Ipsum</li>
            <li>Lorem Ipsum</li>
            <li>Lorem Ipsum</li>
            <li>Lorem Ipsum</li>
            <li>Lorem Ipsum</li>
        </ul>
        <img src="http://i.imgur.com/3DRalRX.gif" />
    </div>
    <div class="prefoot">
    </div>
    <div class="footer">
        Created 11 Sept 2015 (Remember 9/11!)
    </footer>
</body>

Furthermore, the effect of 'prefoot' can then be achieved using margins applied to the elements - for example the margin: 50px; shown in the .footer class above.

Hope this helps.

Upvotes: 1

Related Questions