7 replies [Last post]
hz
Offline
newbie
Last seen: 15 years 42 weeks ago
Timezone: GMT+1
Joined: 2005-02-16
Posts: 1
Points: 0

What I want is two columns next to eachother, with always the same height: the height of the longest div. I've created a div (column 1) with column 2 in it, floating on the right. When column 1 has the larger amount of text, column 2 does not have the same height. How can I solve this? I tried several options, defining height, (100% makes column 2 as high as the screen, not what i want) defining top and bottom, absolute positioning etc.. which options are left?

http://www.ontzettend.nl/css/help2.html and http://www.ontzettend.nl/css/help1.html

Thank you in advance!

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 37 weeks 1 day ago
Joined: 2004-06-30
Posts: 9668
Points: 801

2 columns, same height: HOW

The first thing you need is a doctype. This will sort out page rendering.

Next, you need to read up on floats and positioning. Unfortuanately, there is no proper way to do this. The best way is the 'faux columns' method.

Verschwindende wrote:
  • CSS doesn't make pies

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 18 hours 31 min ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9774
Points: 3856

2 columns, same height: HOW

As tph said, there is no real way to do it. Any equi-length columns are illusion. Search 'faux columns' on A List Apart. You may also study my 2 column - apparent equal heght demo, which also has a second method of faking the column heights.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 1 day 14 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5343
Points: 2964

2 columns, same height: HOW

Hi hz,
Another method is to use the magic of the DOM and JavaScript.
Of course this will only work if JavaScript is enabled and supported by the browser.
Many people aren't comfortable with JavaScript as it has had a bad rap over the last few years but it looks like it's on the way back.
Here's something I have been playing around with.

/* Equal Column Height, accepts a Class name and tag*/  
function equalColHeightClass(classn, tag){  
	var mx=0;  
	var theval;  
	var theeles = new Array();  
	if(document.getElementById){  
		theeles =getElementsByTagClass(tag, classn);  
		var numa= theeles.length;  
		for(var a=0; a < numa; a++){		  
			if(theeles[a].offsetHeight){  
				theval=parseInt(theeles[a].offsetHeight);		  
				if(theval > mx){  
					mx=theval;  
				}  
			}else{  
				return false;  
			}  
		}	  
		for(var n=0; n < numa; n++){  
			theeles[n].style.height=mx+'px';  
		}  
	}  
}  
  
/* returns an array of elements of a given tag and classname */  
function getElementsByTagClass(tag, classname){  
	var allElements = document.getElementsByTagName(tag);  
	var classed = new Array();  
	var i, j, c;  
   
	for (i=0, j=0; i < allElements.length; i++){  
		c = " " + allElements[i].className + " ";  
		if (c.indexOf(" " + classname + " ") != -1){  
			classed[j++] = allElements[i];  
		}  
	}  
  return classed;  
}  
/*example useage */  
window.onload=equalColHeightClass("cols","div");

Just put that in an external js file and any divs with the class of col should end up the same length.

b_creighton
Offline
Enthusiast
Last seen: 15 years 18 weeks ago
Joined: 2005-07-29
Posts: 58
Points: 0

2 columns, same height: HOW

Hmmm, I can't seem to get the above javascript to work for me. I copied that exact code and placed it inside an external javascript file.

I called it using:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Some Title Here</title>
<link rel="stylesheet" href="css/common.css" type="text/css" title="default" />
<style type="text/css" media="screen">
	@import "/css/common.css";
	@import "/css/category.css";
</style>
<script type="text/javascript" src="/compareColumns.js"></script>
</head>

and labled my divs appropriately:

<body>
<!--#include virtual="/inc/header.inc"-->
	<div id="container" style="background: url('/images/mgolfshoes.gif') top left no-repeat #EDEDED;">
	  	<h1>Golf Shoes</h1>
		<div class="cols" id="columnOne" >
			<h4>New</h4>
			<h3 class="collection">Collection</h3>
			<ul>
				<li class="theList"><img src="images/140 pxl/sample.jpg" width="140px" alt="shoe name" /></li>
				<li class="theList"><img src="images/140 pxl/sample.jpg" width="140px" alt="shoe name" /></li>
				<li class="theList"><img src="images/140 pxl/sample.jpg" width="140px" alt="shoe name" /></li>
				<li class="theList"><img src="images/140 pxl/sample.jpg" width="140px" alt="shoe name" /></li>
				<li class="theList"><img src="images/140 pxl/sample.jpg" width="140px" alt="shoe name" /></li>
				<li>test</li>
			</ul>
	  	</div>
		<div class="cols" id="columnTwo" >
			<h4>New</h4>
			<h3 class="collection">Collection</h3>
			<ul>
				<li class="theList"><img src="images/140 pxl/sample.jpg" width="140px" alt="shoe name" /></li>
				<li class="theList"><img src="images/140 pxl/sample.jpg" width="140px" alt="shoe name" /></li>
				<li class="theList"><img src="images/140 pxl/sample.jpg" width="140px" alt="shoe name" /></li>
				<li class="theList"><img src="images/140 pxl/sample.jpg" width="140px" alt="shoe name" /></li>
				<li class="theList"><img src="images/140 pxl/sample.jpg" width="140px" alt="shoe name" /></li>
			</ul>
	 	</div>
		<div class="cols" id="columnThree">
			<h4>New</h4>
			<h3 class="collection">The Traditions Series</h3>
			<ul>
				<li class="theList"><img src="images/140 pxl/sample.jpg" width="140px" alt="shoe name" /></li>
				<li class="theList"><img src="images/140 pxl/sample.jpg" width="140px" alt="shoe name" /></li>
				<li class="theList"><img src="images/140 pxl/sample.jpg" width="140px" alt="shoe name" /></li>
				<li class="theList"><img src="images/140 pxl/sample.jpg" width="140px" alt="shoe name" /></li>
				<li class="theList"><img src="images/140 pxl/sample.jpg" width="140px" alt="shoe name" /></li>
	  		</ul>
		</div> 
.........................................etc, etc, etc

I placed an extra li element in the first column to vary the height - the javascript doesn't appear to work because that first column is longer than the others.

Any ideas? Thanks

b_creighton
Offline
Enthusiast
Last seen: 15 years 18 weeks ago
Joined: 2005-07-29
Posts: 58
Points: 0

2 columns, same height: HOW

anybody? It must be something simple... the code looks ok. am I calling the javascript correctly?

thanks!

b_creighton
Offline
Enthusiast
Last seen: 15 years 18 weeks ago
Joined: 2005-07-29
Posts: 58
Points: 0

2 columns, same height: HOW

does:

window.onload=equalColHeightClass("cols","div");

need to be called from the head of the xhtml?

b_creighton
Offline
Enthusiast
Last seen: 15 years 18 weeks ago
Joined: 2005-07-29
Posts: 58
Points: 0

2 columns, same height: HOW

Here is a script that actually works, found at: http://www.paulbellows.com/getsmart/balance_columns/

// by  and 
// feel free to delete all comments except for the above credit

function setTall() {
	if (document.getElementById) {
		// the divs array contains references to each column's div element.  
		// Replace 'center' 'right' and 'left' with your own.  
		// Or remove the last one entirely if you've got 2 columns.  Or add another if you've got 4!
		var divs = new Array(document.getElementById('center'), document.getElementById('right'), document.getElementById('left'));
		
		// Let's determine the maximum height out of all columns specified
		var maxHeight = 0;
		for (var i = 0; i < divs.length; i++) {
			if (divs[i].offsetHeight > maxHeight) maxHeight = divs[i].offsetHeight;
		}
		
		// Let's set all columns to that maximum height
		for (var i = 0; i < divs.length; i++) {
			divs[i].style.height = maxHeight + 'px';

			// Now, if the browser's in standards-compliant mode, the height property
			// sets the height excluding padding, so we figure the padding out by subtracting the
			// old maxHeight from the new offsetHeight, and compensate!  So it works in Safari AND in IE 5.x
			if (divs[i].offsetHeight > maxHeight) {
				divs[i].style.height = (maxHeight - (divs[i].offsetHeight - maxHeight)) + 'px';
			}
		}
	}
}

window.onload = function() {
	setTall();
}

window.onresize = function() {
	setTall();
}