JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>

<body>
  <div id="container">
    <div id="header">
      <div id="main_menu">
        <p>main menu</p>
      </div>
    </div>

    <div id="content">
      <div id="sub_page_left_column">
        <div id="sub_page_links">
          <h3>Categories</h3>
            <a href="news">All News</a> 
            <a href="news/search/general">General News</a> 
            <a href="news/search/event">Event News</a> 
            <a href="news/search/musician">Musician News</a><br />
        </div>
          <p>What if there is long content here and short content on the right? Or vice versa, if I move the border to be on the right of this left side, what if there is less content on this side than on the right column? How can I make it so the seperation line is as long as the longest content? </p>
      </div>
        
      <div id="sub_page_right_column">
        <div id="news_portal">
          <h1>News Portal</h1>

          <div class="article">
            <a href="#">Angie Shyr, Our 2012 Concertmaster Talks About Her Passion</a>
            <div class="author">
              Posted by: <a href="">Paul</a> on December, 06, 2011
            </div><br />
          </div>
        </div>
      </div>
    </div>

    <div class="push"></div>

    <div id="footer">
      <div id="links">
        <a href="/employment">Jobs</a> <a href="javascript://" onclick=
        "privacy()">Privacy Policy</a> <a href="javascript://" onclick="donors()">Donor
        Policy</a> <a href="/sitemap">Sitemap</a>
      </div>

      <div id="copyright">
        <p>&copy; Copyright 2010-2011 Concert for Hope, INC. All rights reserved</p>
      </div>
    </div>
  </div>
</body>
</html>

CSS

*
{
    margin:0;
    padding:0;
}

h1 { font:bold 18px Arial; color: #000; margin-bottom:20px; }
h4 { font:bold 14px Arial; color: #D15600; margin-bottom:5px; }
h3 { font:bold 16px Arial; color: #C79810; }

body,html
{
    font: 12px 'Trebuchet MS', Trebuchet, Verdana, sans-serif;
    /*font:13px Arial, sans-serif; */
    color: #4F5155;
    background-color:#fff;
    text-align:center;
    height:100%;
    height:auto !important;
    min-height:100%;
}

#container
{
    background:#fff;
    text-align:left;
    min-width:1000px;
    width:1000px;
    margin:30px auto -50px;
    overflow:hidden;
}

#header
{
    width:1000px;
    height:58px;
    text-align:left;
}

#content
{
    margin-top:20px;
    width:1000px;
    clear:both;
    overflow:hidden;
}

.push 
{
    height:50px;
}

#footer {
    width:1000px;
    border-top:1px solid #C79810;
    float:left;
    padding:5px;
    height:50px;
}

#sub_page_left_column
{
    width:209px;
    float:left;
    margin-top:50px;
}

#sub_page_links {
    float:left;
    height:auto;
    width:100%;
}

#sub_page_links a { display:block; }

#sub_page_right_column { 
    border-left:1px solid #CDE;
    width:770px;
    float:right;
    margin-top:50px;
    margin-bottom:20px;
    padding-left:20px;
    height:inherit;
}