Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

dynamic content overlap footer but remain within content flow?

Tags:

My footer if quite high so I'm wondering if it is possible to get the content to overlap it slightly whilst still remaining in the content flow?

I suppose the alternative is to make the footer a few thousand pixels high and position it at the bottom. It's not an elegant solution though, anyone have a better idea?

http://www.digiflipconcepts.com/temporary-images/footer-overlap.jpg http://www.digiflipconcepts.com/temporary-images/footer-overlap.jpg

like image 624
morktron Avatar asked Mar 18 '09 23:03

morktron


People also ask

Why is my content overlapping my footer?

It is overlapping to your content because of its position. The only way to give them some space between the content and the footer is to remove that custom css and then add a bottom padding in the last section element. Right now, the bottom padding is 0 which is why it is close or overlapping to the footer.

How do you make a footer not overlap?

Although the footer isn't actually overlapping the content, you can ensure that it starts below the body by adding clear:both; to the footer CSS so it will clear the previous floated elements before being drawn. Save this answer. Show activity on this post. So, there are many ways to get the layout that you want.

How do I bring down a footer in CSS?

Keep the footer at the bottom by using Flexbox Make sure that you are wrapping everything in a <div> or any other block-level element with the following CSS styles: min-height:100vh; display:flex; flex-direction:column; justify-content:space-between; .


2 Answers

That seems a nice idea. If you need overlapping, then some absolute position must be done.

Set your footer absolutely to the bottom of the page and z-index:0. Then your content z-index:1 and padding-bottom: (footer height - desired overlap).

like image 153
Seb Avatar answered Nov 15 '22 07:11

Seb


You can use sticky footer which I found a while ago in this question

I made this which works in Firefox, but I can't get it to play nice with IE 7. Anybody's help would be awesome.

EDIT: Made it work

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>A CSS Sticky Footer with Overlap</title>
<style type="text/css">
body {
    text-align: center;
}

.wrapper {
    margin: 0 auto -142px;
    position: relative;
    text-align: left;
    width: 700px;
}
.header {
    /*Go download the header yourself from http://ryanfait.com/sticky-footer/header.png
    Please don't steal the guy's bandwidth*/
    background: transparent url(header.png) no-repeat scroll 0 0;
    height: 160px;
}
.footer_bg {
    /*Go download the header yourself from http://ryanfait.com/sticky-footer/footer.jpg
    Please don't steal the guy's bandwidth*/
    background: transparent url(footer.jpg) no-repeat scroll 0 0;
    border: 1px solid blue;
    height: 100%;
    margin: 0 auto;
    width: 700px;
}

.footer {
    clear:both;
    border: 1px solid red;
    margin: 0 auto;
    position: relative;
    width: 100%;
}
.footer_bg p {
    bottom: 4px;
    color: #FFFFFF;
    left: 0;
    position: absolute;
    text-align: center;
    width: 100%;
}
* {
    margin: 0;
}
html, body {
    height: 100%;
}
.wrapper {
    height: auto !important;
    min-height: 100%;
}
.push {
    height: 142px;
    position: absolute;
}
.footer {
    height: 142px;
    z-index: -1;
}
#content {
    z-index: 10;
}

</style>
<link rel="stylesheet" type="text/css" media="screen" href="style.css" />
</head>
<body>
<div class="wrapper">
    <div class="header">
        <h1>CSS Sticky Footer</h1>
    </div>
    <div id="content">
        <h2>A CSS sticky footer that just works</h2>
        <p>We've all tried to use a <strong>sticky footer</strong> one time or another, but they never seem to come out right, do they? Well, the days of a hard to understand CSS-based <strong>sticky footer</strong> are thankfully over. In just a few simple CSS classes with minimal extra HTML markup, I've fashioned a <strong>sticky footer</strong> that even beginners can get a handle on. It's been tested in IE 5 and up, Firefox, Safari and Opera.</p>
        <h2>Usage of the CSS</h2>
        <p><q>Great! this is exactly what I'm looking for! Can I use it?</q></p>
        <p>Absolutely. There are no terms, licenses, fees or requirements. Use it as you will. If you find the kindness to link to me on your site, I'd appreciate it, but it's by no means necessary. Have fun, and don't be afraid to ask me any questions or send me your thoughts.</p>
        <p class="download"><a href="layout.css" title="Download the stylesheet">View the CSS</a> or <a href="/resources/footer-stick-to-bottom-of-page/" title="Make a footer stick to the bottom of a page">learn about using it</a></p>
    </div>
    <div class="push"></div>
</div>
<div class="footer">
    <div class="footer_bg">
        <p>Copyright &copy; 2006-2008 <a href="http://ryanfait.com/" title="Las Vegas Web Design">Ryan Fait</a></p>
    </div>
</div>
</body>
</html>
like image 44
MrChrister Avatar answered Nov 15 '22 06:11

MrChrister