Hi,

1st post here!

I've got a very newbie problem that I've been struggling to solve. I'm trying to set my content div to stretch all the way to the footer.

I've tried so many combinations of min-height, height etc. it is ridiculous.

Any help would be greatly appreciated. thank you.

Here's the code:

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Tester Home</title>

<style type="text/css">

* {
    margin: 0; /*sets the margin for all elements to zero*/
}

#wrapper {
    min-height: 100%;
    background-color: #000;
}
body, html {
    height: 100%; /*the height MUST be set here*/
}

#header_container, #footer_container {
    width: 100%;
    background-color: #8181F7;
}

#footer, #header {
    margin: 0 auto;
    width: 968px;
    padding: 20px;
}

#content {
    background-color: #ccc;
    width: 968px;
    margin: 0 auto;
    min-height: 100%;
    padding: 20px;
    overflow: auto; /*don't know what this does!*/
    padding-bottom: 100px; /*set some padding on the bottom in order to get the footer on screen without going over the top of the content*/
}
#footer_container {
    height: 100px;
    position: relative;
    margin-top: -100px; /*pull the footer up*/
    clear: both; /*don't know what this does!*/
}

</style>

</head>

<body>
    
    <div id="wrapper">
        <div id="header_container">
            <div id="header">
                <p>Header</p>
            </div>
        </div>
       
        <div id="content">
            <p>Content</p>
        </div>
    </div>
    
    <div id="footer_container">
        <div id="footer">
            <p>Footer</p>
        </div>
    </div>

</body>

</html>