CODEWITHSUNDEEP
html
Andy
Andy

Reputation: 759

Bottom positioned DIV

This is driving me crazy. I'm trying to get the footer div to be at the bottom of the page even if the main content doesn't fill the height of the browser. The below code works except for when I shrink the browser up and then the footer div overlaps the wrapper div, then the scroll bar appears. I want it to bump up against the wrapper div like most sites including this one. What am I doing wrong?

<html>
    <head>
        <style>
            body { color:#000; margin: 0; height: 100%; }
            #wrapper {min-height: 100%; height: auto !important; height: 100%; background:#ff0000;
                margin: 0 auto -4em; text-align: left; width: 100%; }
            #header { width: 100%; height: 80px; }
            #content { width: 100%; background:#00ff00; }
            #footer { background:#0000ff; height: 4em; }
        </style>
    </head>

    <body>
        <div id="wrapper">
            <div id="header">
                some menus;
            </div>

            <div id="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ac eros diam, nec ultrices nibh. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed id ipsum libero. Sed ultricies orci ut magna vulputate eu congue justo condimentum. Phasellus a convallis ipsum. Nam nec sapien eget massa porta tristique. Proin metus diam, imperdiet nec eleifend a, faucibus eget quam. Nunc non lacus sit amet lorem vehicula viverra ut vitae sem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi id tellus id ligula dictum consequat non ut ligula. Morbi interdum felis sed turpis sagittis vulputate.
            </div>
        </div>

        <div id="footer">
            &copy; 2009 Somebody
        </div>
    </body>
</html>

Upvotes: 0

Views: 140

Answers (1)

Odif Yltsaeb
Odif Yltsaeb

Reputation: 5656

http://ryanfait.com/resources/footer-stick-to-bottom-of-page/

Check out this live example of how it works: http://www.toonklaas24.ee/

Upvotes: 2

Related Questions