Hey, ive been having troubles finding a way to space the "content" away from the "recents" a margin-top: 25px, doesnt seem to do anything unless i bump it up to 300+ etc and then if the "recents" gets more text added it wont stick to that gap, the class=recent doesnt seem to cover the background of the left;middle;right divs and i suspect that has something to do with it, but how do i make it clear those? i have clear: both; in the recents yet it wont clear them?
also having trouble getting my footer to slide to the bottom instead of in the middle of the bottom

*note that the weird background colors for everything is so i can see whats where and size and so on,

*screenshot of it
http://i.imgur.com/qvnriwi.jpg


index.html
Code:
<!DOCTYPE html>
<html>
    <head>
        <title>titlez</title>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="style.css" type="text/css"/>
    </head>
    <body>
        <div class="frame">
            <header><h1>header whatever here</h1></header>
            <div class="recents">
                <div class="left">
                    <p>10 recent</p>
                    <p>10 recent</p>
                    <p>10 recent</p>
                    <p>10 recent</p>
                    <p>10 recentwordwrapwordwrapwordwrapwor*word_wrap_test</p>
                    <p>10 recent</p>
                </div>
                <div class="middle">
                    <p>10 recent</p>
                    <p>10 recent</p>
                    <p>10 recent</p>
                    <p>10 recent</p>
                    <p>10 recent</p>  
                </div>
                <div class="right">
                    <p>10 recent</p>
                    <p>10 recent</p>
                    <p>10 recent</p>
                </div>
            </div>
            <div class="content">
                <p>*needs to be spaced from recents</p>
                <p>*needs to be spaced from recents</p>
                <p>*needs to be spaced from recents</p>
                <p>*needs to be spaced from recents</p>
                <p>*needs to be spaced from recents</p>
                <p>*needs to be spaced from recents</p>
                <p>*needs to be spaced from recents</p>
                <p>*needs to be spaced from recents</p>
                <p>*needs to be spaced from recents</p>
            </div>
            <footer>
                <p>small footer her *needs to be pushed bottom</p>
                
            </footer>
        </div>
    </body>
</html>
style.css
Code:
body {
    background-color: gainsboro;
    font-family: sans-serif;
    word-wrap: break-word;
}
.left {
    margin-left: 0px;
    margin-top: 10px;
    float: left;
    background: green;
    width: 150px;  
}
.middle {
    margin-left: 5px;
    margin-top: 10px;
    float: left;
    width: 440px;
    background: lightseagreen;
     
}
.right {
    margin-left: 5px;
    margin-top: 10px;
    float: left;
    background: lightpink;
    width: 200px;
}

.recents {
    margin: auto;
    width: 800px;
    background: magenta;
    height: 100%;
    clear: both;
    position: relative;
}
header {
    margin: auto;
    width: 800px;
    background: darkslategray;
    height: 150px;
    color: antiquewhite;
    text-indent: 10px;
    margin-bottom: -5px;
}
.frame {
    margin: auto;
    width: 800px;
    background: mediumpurple;
    height: 100%;
    clear: both;
}
.content {
    margin: auto;
    margin-top: 25px;
    width: 800px;
    background: olive;
    clear: left;
    position: relative;
}
footer {
    background: plum;
    padding-bottom: 0px;
    position: relative;
    bottom: 0;
}