getting a container to stretch from top to bottom, without using TABLES Options

[tunerchiq]

i've started a layout, very simple, basically two columns and a footer. i'm using css to float my elements and i'm having trouble getting the container to stretch from the very, very top of the page to the very, very bottom. this is what it looks like right now:

http://blog.lushix.com

i define the properties of all the elements in here:

<!-- begin code provided by createblog.com --><br /><br />/*---General---*/<br />body {<br /> background: #DBD7BC url('/wp-content/themes/vision/images/mainbg.jpg') repeat-y 49.9% 0;<br /> height: 100%;<br /> }<br /><br />/*---Containers---*/<br />#container {<br /> background: none;<br /> width: 775px;<br /> position: relative;<br /> height: 100%;<br /> margin: 0 auto;<br /> }<br /><br />#topimg {<br /> width: 775px;<br /> height: 273px;<br /> }<br /><br />#side {<br /> float: left;<br /> width: 255px;<br /> padding: 5px;<br /> margin: 5px 5px 10px 5px;<br /> }<br /><br />#main {<br /> float: right;<br /> width: 480px;<br /> padding: 5px 5px 10px 5px;<br /> margin: 5px;<br /> }<br /><br />#footer {<br /> position: absolute;<br /> bottom: 0;<br /> width: 765px;<br /> border-top: 1px solid #393518;<br /> background: #777255;<br /> padding: 5px;<br /> }<br /><br />/*---Side---*/<br />#side p {<br /> text-align: justify;<br /> font: normal 11px Verdana;<br /> color: #3B3618;<br /> line-height: 150%;<br /> padding: 5px;<br /> }<br /><br />#side ul {<br /> border-left: 5px solid #BFBBA2;<br /> text-align: left;<br /> padding: 5px 0px 5px 5px;<br /> margin: 5px 2px 5px 5px;<br /> list-style-type: none;<br /> }<br /><br />#side h1 {<br /> text-align: right;<br /> border-bottom: 1px solid #DBD7BC;<br /> color: #DBD7BC;<br /> font: normal 14px Book Antiqua, Garamond;<br /> text-transform: uppercase;<br /> letter-spacing: 7px;<br /> }<br /><br />#side a.nav {<br /> display: block;<br /> font: normal 11px Verdana;<br /> text-decoration: none;<br /> color: #646045;<br /> padding: 0px;<br /> margin: 0px;<br /> background: #DBD7BC;<br /> text-transform: uppercase;<br /> }<br /><br />#side a:hover.nav {<br /> display: block;<br /> color: #DBD7BC;<br /> background: none;<br /> }<br /><br />/*---Main---*/<br />#main p {<br /> text-indent: 1cm;<br /> text-align: justify;<br /> font: normal 11px Verdana;<br /> color: #3B3618;<br /> line-height: 150%;<br /> padding: 5px;<br /> }<br /><br />#main p:first-line {<br /> color: #E8E4CB;<br /> font-variant: small-caps;<br /> }<br /><br />#main h1 {<br /> text-align: left;<br /> border-bottom: 1px solid #DBD7BC;<br /> color: #DBD7BC;<br /> font: normal 14px Book Antiqua, Garamond;<br /> text-transform: uppercase;<br /> letter-spacing: 7px;<br /> }<br /><br />#main h2 {<br /> text-align: left;<br /> color: #DBD7BC;<br /> font: bold 11px Verdana;<br /> text-transform: uppercase;<br /> }<br /><br />/*---Footer---*/<br />#footer p {<br /> text-align: center;<br /> color: #DBD7BC;<br /> font: normal 11px Verdana;<br /> }<br /><br />/*---Links---*/<br />a {<br /> text-decoration: underline;<br /> text-transform: uppercase;<br /> color: #E8E4CB;<br /> font: normal 11px Verdana;<br /> }<br /><br />a:hover {<br /> text-decoration: underline;<br /> text-transform: uppercase;<br /> color: #5C5737;<br /> font: normal 11px Verdana;<br /> }<br /><br />a.title {<br /> color: #DBD7BC;<br /> font: normal 14px Book Antiqua, Garamond;<br /> text-transform: uppercase;<br /> letter-spacing: 7px;<br /> text-decoration: none;<br /> }<br /><br />/*---Typography---*/<br />.entryquote {<br /> background: url('/wp-content/themes/vision/images/quote.jpg') no-repeat 0%;<br /> font: italics 12pt Book Antiqua, Garamond;<br /> text-align: left;<br /> }<br /><br />.quote {<br /> border-left: 5px solid #BFBBA2;<br /> text-align: left;<br /> padding: 5px;<br /> margin: 5px;<br /> font: italics 12pt Book Antiqua, Garamond;<br /> }<br /><br />dt {<br /> color: #E8E4CB;<br /> background: #A39F84;<br /> border: 1px solid #A39F84;<br /> padding: 5px;<br /> margin: 0px;<br /> }<br /><br />dd {<br /> color: #E8E4CB;<br /> border-left: 1px solid #A39F84;<br /> padding: 5px;<br /> margin: 0px;<br /> }<br /><br />#main ol {<br /> list-style-type: upper-roman;<br /> color: #E8E4CB;<br /> }<br /><br />#main ol li, ul li {<br /> color: #A39F84;<br /> }<br /><br />#main ul {<br /> list-style-type: circle;<br /> color: #E8E4CB;<br /> }<br /><br />acronym {<br /> color: #E8E4CB;<br /> border-bottom: 1px dotted #E8E4CB;<br /> }<br /><br />/*---Forms---*/<br />input {<br /> color: #E8E4CB;<br /> border-bottom: 1px solid #E8E4CB;<br /> background: none;<br /> text-align: left;<br /> font: normal 11px Verdana;<br /> }<br /><br />textarea, select {<br /> color: #E8E4CB;<br /> border: 1px solid #E8E4CB;<br /> background: none;<br /> text-align: left;<br /> font: normal 11px Verdana;<br /> }<br /><br />input.submit {<br /> color: #E8E4CB;<br /> border: 1px solid #E8E4CB;<br /> background: none;<br /> text-align: center;<br /> font: normal 11px Verdana;<br /> }<br /><br />/*---calendar---*/<br />#wp-calendar #prev a {<br /> font-size: 9pt;<br /> }<br /><br />#wp-calendar a {<br /> text-decoration: none;<br /> }<br /><br />#wp-calendar caption {<br /> font: bold 1.3em 'Lucida Grande', Verdana, Arial, Sans-Serif;<br /> text-align: center;<br /> }<br /><br />#wp-calendar th {<br /> font-style: normal;<br /> text-transform: capitalize;<br /> }<br />#wp-calendar {<br /> empty-cells: show;<br /> margin: 10px auto 0;<br /> width: 155px;<br /> }<br /><br />#wp-calendar #next a {<br /> padding-right: 10px;<br /> text-align: right;<br /> }<br /><br />#wp-calendar #prev a {<br /> padding-left: 10px;<br /> text-align: left;<br /> }<br /><br />#wp-calendar a {<br /> display: block;<br /> }<br /><br />#wp-calendar caption {<br /> text-align: center;<br /> width: 100%;<br /> }<br /><br />#wp-calendar td {<br /> padding: 3px 0;<br /> text-align: center;<br /> }<br /><br />#wp-calendar td.pad:hover { /* Doesn't work in IE */<br /> background-color: #fff; }<br /><br /><!-- end code provided by createblog.com -->

any help from anyone is very much appreciated, thank you in advance.

[Heathasm]

CODE

#footer    {
    clear: both;
    bottom: 0;
    width: 765px;
    border-top: 1px solid #393518;
    background: #777255;
    padding: 5px;
    }

that should make your footer showup...i dont think i see any thing else wrong o_O hope that helps