By mikebell_ on

Hi,

I'm using Zen Theme specifically the layout_fixed.css for the fixed widths. I need the height of all three coloumns to go to the bottom of the page. Similar to this (so the div backgrounds tile) - http://www.positioniseverything.net/articles/onetruelayout/equalheight < I've tried to apply that to the template file but failed.

Is there an easy way to do this?

(To simplify, I need all three columns to have the same height based upon the tallest column.)

Thanks for any help!
Mike

⋅ Categories: Drupal 5.x

Comments

Hueij’s picture

Hueij commented

Maybe this is what you need?

http://www.alistapart.com/articles/fauxcolumns/

www.opstijgendenevel.nl

mikebell_’s picture

mikebell_ commented

Thanks for the link, I'll take a look tomorrow when I'm back in work.

A cursory glance shows that it could do what I want.

Still open to more solutions though.

mikebell_’s picture

mikebell_ commented

I applied the stuff from equal height and it works in FF, but in IE 7 and IE6 the left and right column extend beyond the footer. I think it has something to do with the width overflow but I'm not sure.

It's a bit vague I know. Heres a screenshot - http://i26.tinypic.com/2077z2o.jpg

Is there a way to find out whether it is a problem with drupal (the template file) or Zen?

mikebell_’s picture

mikebell_ commented

Anyone got anymore ideas?

mpaler’s picture

mpaler commented

And use jquery.

Try googling

jquery equal column heights

Civicsolar
http://www.civicsolar.com

guillaumeduveau’s picture

guillaumeduveau
Location Toulouse
commented

Well this is probably not the best way in town to do it but here's my solution tested with Zen 5.x-1.1 on FF3 & IE6.

Copy zen/page.tpl.php to zen/yoursubtheme/page.tpl.php.
Then in the end of page.tpl.php, just before </body> add this jQuery script :

<script language="javascript">
$(document).ready(function(){
	var currentTallest = 0;
	currentTallest = $('#content').height();
	if ($('#sidebar-left').height() > currentTallest) {
		currentTallest = $('#sidebar-left').height();}
	if ($('#sidebar-right').height() > currentTallest) {
		currentTallest = $('#sidebar-right').height();}
	$('#content').css('height',currentTallest+'px');
	$('#sidebar-left').css('height',currentTallest+'px');
	$('#sidebar-right').css('height',currentTallest+'px');
});
</script>
darkcss’s picture

darkcss commented

I'm not sure why, but the copying of the page.tpl and inserting this code ISN'T working. I stuck it directly inside of the main zen/page.tpl. I'm using Drupal 6.6 - so that may be why. I'm sure I could get it to work, your way - I just don't have time.

tracerhand’s picture

tracerhand commented

..and these instructions worked perfectly with the zen theme. Try it again - it saved me a lot of headache.

Thanks guix!

guillaumeduveau’s picture

guillaumeduveau
Location Toulouse
commented

My previous suggestion was not good because that way, the javascript is not aggregated with the others.

The correct way is to use drupal_add_js (or something) or to add the jQuery script in a file script.js in your zen subtheme folder and enable script.js in your subtheme.info.

Here's a version for a 2 columns site :

$(document).ready (
  function () {
    var currentTallest = 0;
    currentTallest = $('#content').height();
    if ($('#sidebar-left').height() > currentTallest) {
      currentTallest = $('#sidebar-left').height();
    }
    // for ie6, set height since min-height isn't supported
    if ($.browser.msie && $.browser.version == 6.0) {
      $('#content').css('height',currentTallest+'px');
      $('#sidebar-left').css('height',currentTallest+'px');
    }
    $('#content').css('min-height',currentTallest+'px');
    $('#sidebar-left').css('min-height',currentTallest+'px');
  }
);
peacho’s picture

peacho commented

Just wanted to drop by and say that this fix worked like a charm on my site. I had been trying a few different things that, while potentially more "flexible" weren't working at all (making it worse, obviously). This one is good for my needs and so it's a keeper now. :)

DaPooch’s picture

DaPooch commented

I've tried a number of ways to address the equal height column issue over the years and nothing comes close to the ease and simplicity/flexibility of using JS for this. Granted if you're worried about your end user not having JS on it wont work. But for most sites these days some degree of JS is required and greatly enhances the user experience. I would recommend this route too and if you're paranoid about JS being off then at least use some <noscript> to alert your users that your site requires JS.

As of D6 add JS to your template via your [themename].info file not with drupal_add_js as mentioned above and definitely don't throw it at the bottom of a tpl page if you want to take advantage of the performance enhancements of compressing external js files.

Thanks for the code, I modified it slightly to check for a right sidebar too:

$(document).ready (
  function () {
    var currentTallest = 0;
    currentTallest = $('#content').height();
    if ($('#sidebar-left').height() > currentTallest) {
      currentTallest = $('#sidebar-left').height();
    }
   if ($('#sidebar-right').height() > currentTallest) {
      currentTallest = $('#sidebar-right').height();
    }
    // for ie6, set height since min-height isn't supported
    if ($.browser.msie && $.browser.version == 6.0) {
      $('#content').css('height',currentTallest+'px');
      $('#sidebar-left').css('height',currentTallest+'px');
      $('#sidebar-right').css('height',currentTallest+'px');
    }
    $('#content').css('min-height',currentTallest+'px');
    $('#sidebar-left').css('min-height',currentTallest+'px');
    $('#sidebar-right').css('min-height',currentTallest+'px');
  }
);
zsdlovegs’s picture

zsdlovegs commented

good

darkodev’s picture

darkodev commented

Thanks for the snippet.

In Zen for Drupal 6.x, the code makes the page too short for forms with expanded fieldsets so that the bottom buttons can't be accessed unless you collapse all fieldsets. I'm glad to help strategize a way to adapt the code to account for expanding/collapsing fieldsets. Ideally, it should adjust heights automatically with expansion/contraction.

tracerhand’s picture

tracerhand commented

And I have just run into this problem as well, using the above snippet. It makes Views useless.

urbanbricks’s picture

urbanbricks commented

Check out my solution, hope it helps.
http://drupal.org/node/289911#comment-1253031

NickWebman’s picture

NickWebman commented

You can do one of these...

#main {background:url(/images/background.gif)}

Where background.gif is 1px tall and 960px wide. You just have to make sure the columns you want to use are represented in the image (ie. if you want to use a right column that is 340px wide and light blue, the background.gif needs to have 340px of light blue on the right side.).

This won't work if you use both one and two column column layouts on the same site. Though I'm not sure why you would do that anyhow.

drmiw’s picture

drmiw commented

I struggled with this issue in IE7 and IE6 and the problem was that I had too many CSS files - greater than the 31 recognised by IE7 so my changes weren't being picked up and divs were floating all over the place, but my site looked great in other browsers. I figured the problem wasn't in the Zen sub-theme itself so I re-read the README.txt and found the answer there:

6. Internet explorer has a nasty bug that limits you to 31 stylsheets total. To
get around this limitation during theme development, download, install and
configure the "IE CSS Optimizer" module.

http://drupal.org/project/ie_css_optimizer

On a production server, you should enable full optimization of the "Optimize
CSS files" option on the Admin Performance page at
admin/settings/performance.