Parece que hoy todos se pelean con height, se ve interesante el uso de javascript, ahi te va la version mas famosa en css
height: auto !important;
min-hight: 500px;
height:500px;
500px es solo un ejemplo, aca mezclamos 2 cosas, la primera como ya te explicaron es min-height, el problema es que en cierto navegador no lo interpreta, agregando las 2 lineas anteriores ya tendras los mismos resultados en un navegador decente como en IE.
esta es mi version de tu maquetacion, espero te sirva.
#container {width:auto; height: auto !important; margin: 0px auto;padding: 2px; }
#header { height: 100px; width:auto; background:#CCC; }
#left { width:25%; background:#999;}
#content {width:50%; background:#666;}
#right{width:25%; background:#999;}
#left, #content, #right {float:left; height:auto !important; min-height:300px; height:300px;}
#header, #left, #content, #right, #footer {margin:0px auto; padding:0px; position:relative; }
#footer{height:50px; width:auto; background:#333;}
.clear{clear:both;}
<div id="container">
<div id="header">
texto del header
</div>
<div class="clear"></div>
<div id="left">
texto columna izquiera
</div>
<div id="content">
contenido de la pagina
</div>
<div id="right">
texto columna derecha
</div>
<div class="clear"></div>
<div id="footer">
pie de pagina.
</div>
</div>
Creo que no olvido nada, respecto a las columnas laterales, no es muy "bonito" que una quede mas grande que la otra, en internet haber unos articulos sobre 'faux columns' para darles una mejor vista en estos casos, suerte.