I've found many solutions for this by attached a unique ID to the divs that you want to make equal height (relative to the one that has the most content), but I have a special case. I have a single div that dynamically loads multiple [indefinite] times, so it has the same ID. The issue, as with the simpler cases, is that sometimes the content that loads into the div is more or less than the others next to it - so, for example, when I have a 3x3 grid of divs (which would be even if they had fixed heights) the grid is thrown off and I'm left with some divs skipping rows.
There's a form that allows you to store address information, but not all fields are required. When 5 of the 5 fields are filled out for 9 records, the 3x3 div layout is very square. However, when, say, the #3 of 9 only has 3 of 5 fields filled in and stores the record it throws off the alignment of the divs #4-9.
The div that encapsulates the address info is written as a single instance in the code which repeats depending on how many records you have. What I would like to do is have all 9 (or however many records are stored and displayed) be the same height regardless of their content. I assume this could be done by determining the height of the tallest of the 9 and setting the rest to the same height. However, I haven't found a solution for this being that the divs that will have their height adjusted load in dynamically from one instance (so they all have the same ID on the encapsulating div).
(so they all have the same ID on the encapsulating div).
If I understand you correctly, you cannot have multiple elements with the same ID. You can have multiple elements with the same name or same class name.
If I understand you correctly, you cannot have multiple elements with the same ID. You can have multiple elements with the same name or same class name.
Technically you can for styling purposes, but I'll refer it as class from here on out. So they all have the same class name. Do you know a solution?
Unfortunately it doesn't, but thank you for suggesting it. That one isn't exactly equal columns but rather a background image that creates the color that extends the height of the column with the most content.
What I need is a solution where the divs are free-floating (floating left with margins on each to separate them and a fixed width to determine how many columns there will be) without any unique identifiers (the class/id on each will be the same). So the JS (I don't believe it can be done with CSS alone) needs to determine the height of the tallest of them and set that height on the rest (or something or the sort).
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>None</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">
function init(){
var nHeight = [];
var nDataContainer = document.getElementById('dataContainer').getElementsByTagName('div');
for (i=0; i<nDataContainer.length; i++)
{
nHeight[nHeight.length] = nDataContainer[i].clientHeight;
}
nHeight.sort(function(a,b)
{
return b-a;
}
)
for (i=0; i<nDataContainer.length; i++)
{
nDataContainer[i].style.height = nHeight[0] + "px";
}
}
navigator.appName == "Microsoft Internet Explorer" ? attachEvent('onload', init, false) : addEventListener('load', init, false);
</script>
<style type="text/css">
body {background-color: #fffacd; margin-top: 60px;}
.dataDisplay {width: 75px; border: 1px solid black; background-color: #87ceeb;
float: left; margin-right: 15px;}
</style>
</head>
<body>
<div id="dataContainer"> <!-- include as many divs as needed inside the container -->
<div class="dataDisplay"></div>
<div class="dataDisplay"></div>
<!-- any of the divs can contain the text -->
<div class="dataDisplay">
Tincidunt id ante. Etiam egestas orci in velit tristique ut ullamcorper
urna egestas. Duis eget risus sem, eu aliquet arcu. Sed ac mauris et arcu
interdum malesuada sed eu augue. Suspendisse quis nisi massa.
</div>
<div class="dataDisplay"></div>
<div class="dataDisplay"></div>
</div>
</body>
</html>
Equal Height Columns
Reply With Quote
Originally Posted by tirna
Bookmarks