Setting a div's height in HTML with CSS

<html>    <body>    <style type="text/css">    .rightfloat    {        color: red;        background-color: #BBBBBB;        float: right;        width: 200px;    }    .left {        font-size: 20pt;    }    .separator {        clear: both;        width: 100%;        border-top: 1px solid black;    }    </style>    <div class="separator">      <div class="rightfloat">        Some really short content.      </div>      <div class="left">         Some really really really really really really really really really really big content      </div>    </div>    <div class="separator">      <div class="rightfloat">        Some more short content.      </div>      <div class="left">         Some really really really really really really really really really really big content      </div>    </div>    </body>    </html>

body
 -> header (big blue banner)
 -> headerNav (green bar at the top)
 -> breadcrumbs (invisible at the moment)
 -> page
     -> navigation (floats to the right)
     -> content (main content)
         -> clear (the quote at the bottom)
         -> footerNav (the green bar at the bottom)
     -> clear (empty but still does something)
 -> footer (blue thing at the bottom)

<html>    <head>        <style>            html,body {                height: 100%            }            #left {                float: left;                width: 25%;                height: 100%            }            #right {                width: 75%;                height: 100%            }        </style>    </head>    <body>        <div id="left">            Content        </div>        <div id="right">            Content        </div>    </body></html>

<div class="row">
    <div class="right-column">Right column content</div>
    <div class="left-column">Left column content</div>
</div>
<div class="row">
    <div class="right-column">Right column content</div>
    <div class="left-column">Left column content</div>
</div>

html,
body {
    height:100%;
}

div.row {
    width:100%;      /* Clear internal floats in IE */
    overflow:hidden; /* Clear internal floats */
}

div.right-column,
div.left-column {
    padding-bottom:1000em;  /* } Balance the heights of the columns */
    margin-bottom:-1000em;  /* }                                    */
}

div.right-column {
    width:20%;
    float:right;
}

div.left-column {
    width:79%;
    float:left;
}

<html>
<body>
<style type="text/css">
.rightfloat
{
color: red;
background-color: #BBBBBB;
float: right;
width: 200px;
}

.left {
font-size: 20pt;
}

.separator {
clear: both;
width: 100%;
border-top: 1px solid black;
}
</style>

var leftcol = $("#leftcolumn");
 var rightcol = $("#rightcolumn");
 var leftcol_height = leftcol.height();
 var rightcol_height = rightcol.height();

 if (leftcol_height > rightcol_height)
   rightcol.height(leftcol_height);
 else
   leftcol.height(rightcol_height);