the place of the footer Html css - html

Question

I have this Tow column page layout || but the problem that the footer is for the whole file
what if I want the footer to be under the right column only as the black footer in this image
I tried to chand the part
footer content
but it didnt came in the place I wanted
<style>
html, body {
font-family: Helvetica;
height: 100%; /*important for equal height columns*/
}
#wrapper{
height: 100%; /*important for equal height columns*/
padding-bottom:60px; /*This must equal the height of your header*/
}
#header{
background-color: #222;
height: 60px; /*This must equal padding bottom of wrap*/
display:block;
padding: 10px;
color: #fff;
}
#main {
position: relative;
height: 100%; /*important for equal height columns*/
width: 100%;
overflow:auto;
display: table; /* This is needed fo children elements using display table cell*/
table-layout: fixed;
padding-bottom: 80px; /*This needs to match footer height*/
overflow: auto;
}
#side{
background-color: #ccc;
width: 200px;
vertical-align: top;
text-align: center;
padding: 10px 0;
display: table-cell; /*To make sibling columns equal in height*/
}
#side-stuff{
display: block;
}
#content{
background-color: pink;
padding: 20px;
display: table-cell; /*To make sibling columns equal in height*/
}
#content-stuff{
width: auto;
height: auto;
}
#footer{
position: relative;
height: 80px;
margin-top: -80px; /* margin-top is negative value of height */
clear: both;
background-color: #222;
color: #fff;
padding: 10px;
}
</style>
<div id="wrapper">
<div id="header">
header content
</div>
<div id="main">
<div id="side">
<div id="side-stuff">
sidebar stuff
</div>
</div>
<div id="content">
<div id="content-stuff">
content stuff
</div>
</div>
</div>
<div id="footer">
footer content
</div>
</div>

Answer 1

Hope this helps
<style>
#wrapper{
margin:0px auto;
padding:0px;
width:1000px;
}
#header
{
margin:0px;
padding:0px;
width:1000px;
height:100px;
background-color:lavender;
}
#content
{
margin:0px;
padding:0px;
width:1000px;
}
#side
{
margin:0px;
padding:0px;
width:250px;
height:700px;
background-color:grey;
float:left;
}
#main
{
margin:0px;
padding:0px;
width:750px;
height:700px;
float:right;
}
#main1
{
margin:0px;
padding:0px;
width:750px;
height:650px;
background-color:pink;
float:right;
}
#footer
{
margin:0px;
padding:0px;
width:750px;
height:50px;
background-color:black;
float:right;
}
</style>
<div id="wrapper">
<div id="header"> Header </div>
<div id="content">
<div id="side">Side</div>
<div id="main">
<div id="main1">Main</div>
<div id="footer">Footer</div>
</div>
</div>
</div>

Answer 2

put the div of the footer inside the div of the side
<div id="side">
<div id="side-stuff">
sidebar stuff
</div>
<div id="footer">
footer content
</div>
</div>