Email
Share

We Rock Your Web Forum » Markup Languages » CSS

CSS Equal Height Columns

(2 posts)

  1. DrupalJunkie

    senior member
    Joined: Oct '09
    Posts: 77

    Reputation:140
     

    I'm using a Drupal layout that has three columns - a center column, and two sidebars that are floated. They're inside a container that has an inner background color that's different from the white background of the columns. When the center column has a lot of content, it extends down far beyond the sidebars, leaving a lot of gray space.

    Is there any way to have all the columns extend down and equal/ level out to the height of the tallest column? I've tried using various max-height and min-height styles, but am getting nowhere.

    I'm guessing the solution involves some scripting, and that's over my head

    Posted 1 year ago #


  2. Posted 1 year ago

  3. Anonymous



    You can use this jQuery function:

    (function($) {
	$.fn.equalHeights = function(minHeight, maxHeight) {
		tallest = (minHeight) ? minHeight : 0;
		this.each(function() {
			if($(this).height() > tallest) {
				tallest = $(this).height();
			}
		});
		if((maxHeight) && tallest > maxHeight) tallest = maxHeight;
		return this.each(function() {
			$(this).height(tallest).css("overflow","auto");
		});
	}
})(jQuery);

    You'll need to call it like this:
    $(".cols").equalHeights();

    Credit to CSSNewbie.com for this solution!

    Posted 1 year ago #

RSS feed for this topic

Reply

(required)

Allowed markup: BBcode blockquote code em strong ul ol li font strike center u hr.
You can also put code in between backtick ( ` ) characters.