Sticky Footer CSS

Question

I have a pretty basic site (header,content,footer no sidebars or anything) the problem is the content area is overlapping the footer. I have tried all the sticky footer fixes (i.e csstricks, ryanfait.com and a few others I found on google and some on here and none of them work

As usual any help is appreciated

    <body>
     <div class="wrapper">


            <div id="header">
            </div>

            <div id="content">      
            </div>

            <div id="push">
            </div>

     </div>

     <div id="footer">
     </div>

</body>



    * {
margin: 0;
}

html, body {
height: 100%;
}



#header{
    background-image:url("Images/nav.jpg");
    width:100%;
    height:64px;
}

#content{
    background:#ffffff;
    height:592px;
    width:798px;
    position:absolute;
    top:80px;
    left:20%;
    z-index:3;
    -moz-box-shadow: 0px 0px 8px #000000; /* FF3.5+ */
    -webkit-box-shadow: 0px 0px 8px #000000; /* Saf3.0+, Chrome */
    box-shadow: 0px 0px 8px #000000; /* Opera 10.5, IE9, Chrome 10+ */
}

#wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -129px;
}

#footer, #push {
height: 129px;
}

#footer{
    background-color:#292929;
    width:100%;
}

score 3 · Accepted Answer · answered Apr 28 '11 at 17:51

3

Why is your content absolutely positioned? It does not seem to be needed and will cause the issues you are experiencing. Remove that and make the footer:

#footer {
 position: fixed;
 bottom: 0;
 height: 80px; 
}

http://jsfiddle.net/JyQxW/

answered Apr 28 '11 at 17:51

Dustin Laine

37,935
10
86
125

The content area is a box in the centre of the page its absolutely positioned to keep it in the center – shane12195 Apr 28 '11 at 18:00
Absolute positioning is a poor way to horizontally center that content. Instead simple add `margin: 0 auto;` – Dustin Laine Apr 28 '11 at 18:06
That worked great! the only thing now is my top margin wont work – shane12195 Apr 28 '11 at 18:14
Just tell your content area to hide overflow, and leave it absolutely positioned: http://stackoverflow.com/a/20114486/618649 – Craig Tullis Dec 01 '13 at 21:26

score 0 · Answer 2 · answered Apr 28 '11 at 17:51

0

Are you trying to make a sticky footer, i.e. one that is always at the bottom of the page even when you scroll, or are you just trying to fix the content-overflow issue?

To keep the content from overflowing, float #content to the left or right.

answered Apr 28 '11 at 17:51

MoonKat1216

46
4

Im tryin to make a sticky footer – shane12195 Apr 28 '11 at 17:58

score 0 · Answer 3 · answered Apr 28 '11 at 17:51

0

You could try to clear both before you begin your footer..

<div style="clear:both"></div> <!-- add this line just above your div footer -->
<div id="footer">

answered Apr 28 '11 at 17:51

Louie

5,920
5
31
45

Ugh. :-) Layout logic mixed with your data (HTML = **data**, CSS = layout) – Craig Tullis Dec 01 '13 at 21:25

Sticky Footer CSS

3 Answers3

Linked