Geekzone: technology news, blogs, forums
Guest
Welcome Guest.
You haven't logged in yet. If you don't have an account you can register now.




7 posts

Wannabe Geek


Topic # 23668 6-Jul-2008 15:04
Send private message

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>

<!-- Layout -->
  <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">
      &nbsp;&nbsp;&nbsp;&nbsp;&copy; 2008 opengym.co.nz.  All rights reserved.  Design by lionel AT openshaw.uk.net
      </div>
  </div>
  <div id="page_foot"></div>
<!-- /layout -->
</div id="page_bottom">

Create new topic


7 posts

Wannabe Geek


Reply # 143381 6-Jul-2008 16:16
Send private message

I think I may have found a solution here:  http://www.pmob.co.uk/temp/3colfixedtest_explained.htm

Man, I can't believe this is so hard to do!!

Create new topic



Twitter »

Follow us to receive Twitter updates when new discussions are posted in our forums:



Follow us to receive Twitter updates when news items and blogs are posted in our frontpage:



Follow us to receive Twitter updates when tech item prices are listed in our price comparison site:





News »

Exhibition to showcase digital artwork from across the globe
Posted 23-May-2018 16:44


Auckland tops list of most vulnerable cities in a zombie apocalypse
Posted 23-May-2018 12:52


ASB first bank in New Zealand to step out with Garmin Pay
Posted 23-May-2018 00:10


Umbrellar becomes Microsoft Cloud Solution Provider
Posted 22-May-2018 15:43


Three New Zealand projects shortlisted in IDC Asia Pacific Smart Cities Awards
Posted 22-May-2018 15:14


UpStarters - the New Zealand tech and innovation story
Posted 21-May-2018 09:55


Lightbox updates platform with new streaming options
Posted 17-May-2018 13:09


Norton Core router launches with high-performance, IoT security in New Zealand
Posted 16-May-2018 02:00


D-Link ANZ launches new 4G LTE Dual SIM M2M VPN Router
Posted 15-May-2018 19:30


New Panasonic LUMIX FT7 ideal for outdoor: waterproof, dustproof
Posted 15-May-2018 19:17


Ryanair Goes All-In on AWS
Posted 15-May-2018 19:14


Te Papa and EQC Minecraft Mod shakes up earthquake education
Posted 15-May-2018 19:12


Framing Facebook: It’s not about technology
Posted 14-May-2018 16:02


Vocus works with NZ Police and telcos to stop scam calls
Posted 12-May-2018 11:12


Vista Group signs Aeon Entertainment, largest cinema chain in Japan
Posted 11-May-2018 21:41



Geekzone Live »

Try automatic live updates from Geekzone directly in your browser, without refreshing the page, with Geekzone Live now.



Are you subscribed to our RSS feed? You can download the latest headlines and summaries from our stories directly to your computer or smartphone by using a feed reader.

Alternatively, you can receive a daily email with Geekzone updates.