CSS problem in Firefox

I have this problem with a design I am putting together involving 2-3 column layout with coloured background. I can get it to work in IE OK, but FF, the 'standards compliant' one will not heed the CSS instructions.

The site is at http://opengym.co.uk and the issue involves a breakage in the background colour of about 20px in height which occurs when the text in a column does not fill down as far as the other column(s). The background colour consists of the two or three columns (when there is content in the right column).

I've tried all the solutions I could find on the net including

body {height: 100%;}
html>body #wrapper {min-height: 100%; height: 100%;}
where you assign 100% height to the container above the wrapper container (which has the background). This (or something like it) is supposed to work in FF but I was not able to get it to.

I also spent some time changing the layout to tables, but completely lost control of it and the content started overflowing. This is a really simple design so it should be possible using divs anyway.

The basic problem is how do you get background colour to flow down to the bottom of 2 or 3 columns in a div layout??

If anybody has a solution that would be great. The css is here: http://opengym.co.uk/drupal/themes/opengym/style.css and the html is below (this is a drupal template):

<body>


<div id="wrapper">
      <div id="header-region" class="clear-block"><?php //print $header; ?>
          <?php if ($logo) {
              print '<a href="?q=home" title="home"><img src="'. check_url($logo) .'" alt="'. $site_title .'" id="logo" width="310px" /></a>';
            } ?>
      </div>
      <div id="border_t">
      </div>
       <div class='leftcol'>
          <div id="sidebar-left" class="sidebar">
            <?php print $sidebar_left ?>
          </div>
      </div class='leftcol'>
     <div class='midcol <?php print $midcol_class; ?>'>
        <div id='midcol_wrapper'>
         <div class="clear"></div>
          <?php if ($breadcrumb): print $breadcrumb; endif; ?>
          <?php if($home) print $home ?>
          <?php if ($primary): print $primary; endif; ?>
        <div class="clear"></div>
          <?php if ($mission): print '<div id="mission">'. $mission .'</div>'; endif; ?>

          <?php if ($tabs): print '<div id="tabs-wrapper" class="clear-block">'; endif; ?>
          <?php if ($title): print '<h2'. ($tabs ? ' class="with-tabs"' : '') .'>'. $title .'</h2>'; endif; ?>
          <?php if ($tabs): print $tabs .'</div>'; endif; ?>

          <?php if (isset($tabs2)): print $tabs2; endif; ?>

          <?php if ($help): print $help; endif; ?>
          <?php if ($messages): print $messages; endif; ?>
          <?php if($_GET['q'] != "" && $_GET['q'] != "home") print $content ?>
          <?php print $feed_icons ?>
          <span class="clear"></span>
        </div id='midcol_wrapper'>
      </div>
      <?php if ($sidebar_right) { ?>
      <div class='rightcol'>
          <div id="sidebar-right" class="sidebar">
          <?php print $sidebar_right ?>
          </div>
      </div class='rightcol'>
      <?php } ?>

</div id="wrapper">
<div id="page_bottom">

<div class="clear"></div>
<div id="border_b">
<div id="border_bl">
</div>
<div id="border_rbl">
</div>
<div id="border_rb">
</div>
<div id="border_rbr">
</div>
   <div id="border_wbl">
</div>
<div id="border_wb" class="<?php print $border_wb_class; ?>">
</div>
   <div id="border_wbr">
</div>
<?php if ($sidebar_right) { ?>
    <div id="border_bbl">
    </div>
    <div id="border_bb">
    </div>
    <div id="border_bbr">
    </div>
<?php } ?>
</div id="border_b">
<div id="footer">
    <div id="footer_left"></div>

      <?php print $footer_message ?>
    <div id="copy_footer">
        © 2008 opengym.co.nz. All rights reserved. Design by lionel AT openshaw.uk.net
      </div>
</div>
<div id="page_foot"></div>

</div id="page_bottom">

NewZeal

NewZeal