Wed, 2005-02-16 12:56
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!
Wed, 2005-02-16 13:43
#1
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.
Wed, 2005-02-16 17:32
#2
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
Thu, 2005-02-17 00:41
#3
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.
Mon, 2005-08-01 14:36
#4
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
Tue, 2005-08-02 12:41
#5
2 columns, same height: HOW
anybody? It must be something simple... the code looks ok. am I calling the javascript correctly?
thanks!
Tue, 2005-08-02 12:44
#6
2 columns, same height: HOW
does:
window.onload=equalColHeightClass("cols","div");
need to be called from the head of the xhtml?
Wed, 2005-08-03 18:53
#7
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();
}