Sticky Footer Problem (CSS/JS)

programming web dev
1

Hello,

I need some help with this CSS Sticky footer. I’m pretty close to something that works, it just needs another eye at this point. There are 2 issues. The first one is that I need to have an extra div (#corner) outside of the #inner-wrap div. The margin on the #corner div along with the other margins labeled in the styles like /* !!! */ are causing a bit of scroll at the bottom of the footer. If you remove these styles everything is fine. I really need some help to fix this and make it a bit more stable. I have to have the #corner div outside of #inner-wrap.

The second problem is that Safari, IE 6, Opera, and Omniweb all seem to dislike min-height: 100% style on #inner-wrap and the footer gets stuck in these browsers requiring some fidgeting of the browser size to knock the footer back to the bottom. I’ve included a hack for IE 6 that works great but am unsure what to do to fix things the other troubled browsers.

Here is the code. I would really appreciate some help within the context of the following code.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
        "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">     

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    
    <head>

        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <style type="text/css">
        * { margin: 0; padding: 0; }
        
        html, body, #container-page {
            height: 100%;
            margin: 0; padding: 0 2em;
        }
        
        body { background: purple; }

        #container-page {
            margin: 0 auto; padding: 0;
            min-width: 40em;
            max-width: 50em;
            margin-top: 20px; /* !!!!!!!! */
        }
        
        /* Fixed Width for IE 6 */
        * html #container-page {
            width: 760px;
        }
        
        /* Safari, IE, Opera, and OmniWeb dislike min-height: 100% */
        #inner-wrap { 
            position: relative;
            min-height: 100%;
            margin: 0 0 1.25em 0; /* !!!!!!!! */
            background-color: #F7F4ED;
        }
        
        /*     HACK: IE 6 fix for min-height */
        * html #inner-wrap { height: 100%; }

        #corner {
            background: blue; 
            margin: 0; padding: 0; 
            height: 20px; /* !!!!!!!! */
        }

        #footer {
            width: 100%;
            position: relative;
            border-top: 10px solid #E0DFDD; /* !!!!!!!! */
            background: #A6A5A3;
            padding-top: 10px;
            margin-top: -185px; /* 175px height + 10px top-padding */
            height: 175px;
        }

        #primary-content  {
            padding: 0 1em; 
        }
        
        #primary-content {
            padding-bottom: 185px; /* must match #footer margin-top */
        }
        </style>
        
    </head>

    <body id="home">
        <div id="container-page">
            
            <div id="corner"></div>
            
            <!-- inner wrap in -->
            <div id="inner-wrap">                
                <div id="primary-content">
                    <p>column long long column very long fill fill fill long text text column text silly very make long very fill silly make make long make text fill very long text column silly silly very column long very column filler fill long make filler long silly very long silly silly silly long filler make column filler make silly long long fill very.</p>
                </div>
            </div>
            <!-- inner wrap out -->
            
            <div id="footer">
                <p>footer text here</p>
            </div>
            
        </div>
                    
    </body>
</html>