CSS Forum

**samo1215** · 06-26-2009, 07:39 PM

I am trying to create page with a fixed height header (80px), a body that expands to fill the page and a footer that sticks on the bottom.

Unfortunately, I don't have enough content to cover the whole page but I want to create a shadow border effect for the body that runs from the header to the footer which is stuck on the bottom.

I have the footer stuck on the bottom with a div wrapper around all of the page except the footer which is then pushed to the bottom with a "push" div and then wrapped in its own.

Everything works except I can't get the background-image for the body to stretch vertically all the way to the footer.

**LadynRed** · 06-26-2009, 07:51 PM

Did you read our stickies ?
http://www.webmaster-talk.com/css-fo...l-browser.html

Are you using floats ? Have you CLEARED the floats ?

Have you got a URL where we can see it ?

**samo1215** · 06-26-2009, 10:39 PM

I promise I read the sticky and even did a search here and I still can't get it to work. I don't have a url as I am only working on it locally. The code is pretty lengthy so I am going to post an abbreviated version below:

HTML

Code:

<!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" lang="en">

    <head>
        <title>My Website</title>
        <link href="main_style.css" type="text/css" rel="stylesheet" />
        <meta http-equiv="content-type" 
            content="text/html;charset=utf-8" />
        <meta http-equiv="Content-Style-Type" content="text/css" />
    </head>

    <body>
    
    
        <div class="wrapper"> <!-- Document Container For Maintaining Static Footer -->
            
            
            
            <div id="header"> <!-- Header -->
            
                <div id="headerwrap">
                    
                    <div id="logo"><img src="images/logo.png" alt="Logo" /></div>
            
                    <div id="navcontainer">
                        <ul id="nav">
                            <li id="home-nav"><a href="index.html" rel="tag">Home</a></li>
                            <li id="aboutus-nav"><a href="aboutus.html" rel="tag">About Us</a></li>
                            <li id="portfolio-nav"><a href="portfolio.html" rel="tag">Portfolio</a></li>
                            <li id="foundation-nav"><a href="foundation.html" rel="tag">Foundation</a></li>
                            <li id="contact-nav"><a href="contact.html" rel="tag">Contact</a></li>
                        </ul>
                    </div>
            
                </div>
            
            </div> <!-- End Header-->
            
            
            <div id="contentcontainer"> <!-- Content -->
            
                <div id="contentband">
                    
                    <div id="maincontent">
                        <h2>Welcome</h2>
                        <p>insert a bunch of text here</p>
                    </div>

                    
                    <div id="news">
                        <h3>News</h3>
                        <p>insert a bunch of text here</p>
                    </div>
                    
                    
                    <div id="searchbar">
                        <h3>Search</h3>
                        <!-- Insert Google Custom Search -->   
                    </div>
                    
                    
                    <div id="propertyslideshow">
                        <h3>See Our Portfolio</h3>
                        <!-- Insert Javascript Slideshow -->
                    </div>
                    

            
                </div>
            
            </div> <!-- End Content -->
            
            
            <div class="push"></div> <!-- Keeps Footer On Bottom Of Page -->
        
        
            </div> <!-- Closing Wrapper Div -->
        
        
        <div id="footer"> <!-- Footer -->
            
            <p>
                <a href="#">Disclaimer</a>
                |
                <a href="#">Terms &amp Conditions</a>
                |
                <a href="#">Site Map</a>
                |
                <a href="#">Contact Us</a>
            </p>
            
        </div> <!-- End Footer -->
    
    </body>

</html>

CSS

Code:

* {
    margin: 0;
}

html, body {
    height: 100%;
}

.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -100px; /* the bottom margin is the negative value of the footer's height */
}

#footer, .push {
    height: 100px; /* .push must be the same height as .footer */
}

I am planning on using some floats to get the logo, navigation bar and content items into place. If the code is really pertinent I'll add it to my post but my stylesheet is pretty long.

**LadynRed** · 06-27-2009, 11:03 AM

Ok, but you didn't answer my other question - are you using floats and are you CLEARING the floats ? If you don't clear the floats inside it, the #wrapper isn't going to stretch or 'wrap' it's contents.

**samo1215** · 06-27-2009, 03:16 PM

I am clearing the floats I am using. I have a container around the content section which I use a "clear: both" to get rid of any floats in the header. Then everything in the footer is in a footer container which also contains a "clear: both".

I was playing around with my code last night and I think I might have solved it but I'm worried my fix is more of a hack.

I put the body shadow image in the .wrapper class and then in the html I put a div above the .wrapper container with the very top sliver of the image I'm using. So far it looks like it works but I'm worried if somebody has a really tall screen and I have a page with a limited amount of content that it might not stretch properly.

Can anybody guess if this might fall apart on me?