Q:

2 column website sidebar full height

I'm making a 2 column webpage layout. I wanna make a border that takes 100% of the page height. I have tried a few different things but I alwys get the same result, it only adds border whenever there's content. Anyone has some advice in this?
HTML
<body>
    <div id="top">
        <nav>
            <a class="navitem" href="#">Stream</a>
            <a class="navitem" href="/discover">Discover</a>
        </nav>
                <form action="#" class="form-wrapper cf">
                <input type="text" placeholder="Search..." onfocus="this.placeholder = ''" onblur="this.placeholder = 'Search...'" required>
                <button type="submit">Search</button>
                </form>    
    </div>

<div id="wrapper">

<div id="content"> 
<h1> Content</h1>
</div>

<div id="divider"></div>

<aside>
<h1>right bar</h1>

<footer>
<nav>
<a class="navitem_footer" href="/contact">Contact</a>
<a class="navitem_footer" href="/about">About us</a>
<a class="navitem_footer" href="/premium">Premium</a>
</nav> 
</footer>

</aside>

</div>

</body>

CSS
#wrapper {
    width: 990px;
    margin-right: auto;
    margin-left: auto;
}

#content {
    width: 600px;
    float: left;
}

#divider {
        position: absolute;
    overflow: hidden;
    left: 900px;
    right: 0;
    top: 0;
    bottom: 0;
    border-left: 1px solid rgba(192,192,192,0.6);
    }
aside {
    float:right;
    width: 390px;
}

footer {
    height: 50px;
    clear: both;
    position:fixed;
    bottom:0;
}

Thank you in advance.
I got the border working now, but its covering my header & i tried overflow hidden but that didn't work.
Screenshot : http://i62.tinypic.com/2czbp6s.png

A:

For this you can use  tag by which you can easily divide main page into 2 columns
and link will be your HTML pages
CODE:

<!DOCTYPE html>
<html>

<frameset cols="50%,50%" border="10" BORDERCOLOR=#ff0000>
  <frame src="first_page.html" frameborder="1">
  <frame src="second_page.html" frameborder="1">
</frameset>

</html>

And for 100% border you can use this code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <title>Border around content</title>
  <style type="text/css">
    * {
      margin: 0;
      padding: 0;
    }

    html, body {
      height: 100%;
      overflow: hidden;
    }

    #wrapper {
      position: absolute;
      overflow: auto;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      border: 5px solid red;
    }
 </style>
  <!--[if IE 6]>
  <style type="text/css">
    #wrapper {
      width: expression((m=document.documentElement.clientWidth-10)+'px');
      height: expression((m=document.documentElement.clientHeight-10)+'px');
    }
  </style>
  <![endif]-->
</head>
<body>
  <div id="wrapper">
    <!-- just a large div to get scrollbars -->
    <div style="width: 9999px; height: 9999px; background: #ddd"></div>
  </div>
</body>
</html>

