I want to fix my footer to the bottom of my content (not screen) so that it is all in one div ? Any ideas?

Question

I want to fix my footer at the bottom of my content so that when ever i add content it will just automatically adjust with it, Like this website here (http://www.matthamm.com/about)

Here is the Jsfiddle of what it more or less looks like now http://jsfiddle.net/9L6Lh/

HTML: Home

                <p>This Website will be made using PHP</p>
                <p>A Home Page</p>
                <p>A Style Sheet</p>
            </div>
        </div>
    </div>
</div>
<div id="footer_wrapper">
    <div id="footer_inner_wrapper">
        <div>
            <p>&copy;
                <?php echo date( "Y"); ?>UR. All rights reserved. Andrew Byrne.</p>
        </div>
    </div>
</div>

CSS:

body {
margin: 10%;
min-width: 30%;
text-align: center;
background-attachment: fixed;
background-image:url(/img/mooning.png);
font-weight:bold;
color:#666666;
}
#main {
height: auto;
width:80%;
margin:auto;
text-align:left;
padding:15px;
font-family:'Roboto', sans-serif;
background-color:red;
box-shadow: -10px -10px 15px #888;
overflow:auto;
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
-webkit-font-smoothing: antialiased;
}





.day3txt {
margin-top: 1%;
border-bottom: 3px solid #c7c7c7;
padding: 80px;
}
#footer_wrapper {
background-color: black;
}
#Contact-font li {
list-style: none;
}
#Contact-font li a {
border-bottom: 2px solid #336699;
}
#Contact-font li a:hover {
color: #E8110F;
opacity: 0.7;
}
/*banner */
#nav li {
margin-top: 0.25%;
white-space: nowrap;
list-style: none;
float:left
}
#nav li a {
font-size: 25px;
display: inline-block;
padding: 10px 10px;
text-decoration: none;
color: #E8110F;
}
#nav select {
display: none;
}

Answer 1

Just add overflow: hidden; to the footer and append some margin.

here is your fiddle with "connected" footer: http://jsfiddle.net/9L6Lh/1/

#footer_wrapper {
    background-color: black;
    margin: 0 46px;
    overflow: hidden;
     -webkit-border-bottom-left-radius: 10px;
    -webkit-border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}