www.webdeveloper.com
Results 1 to 10 of 10

Thread: Equal Height Columns

Hybrid View

  1. #1
    Join Date
    May 2010
    Posts
    6

    Question Equal Height Columns

    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.

    Anyone know a solution to this?

  2. #2
    Join Date
    Mar 2010
    Posts
    2,803
    which of the 3 x 3 divs is the one that loads multiple time?

    If you post you code it will be easier to see what is going on.

  3. #3
    Join Date
    May 2010
    Posts
    6
    Here's what it looks like...

    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).

    Anyone have a working solution for this? Thanks.

  4. #4
    Join Date
    Mar 2010
    Posts
    2,803
    (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.

  5. #5
    Join Date
    May 2010
    Posts
    6
    Quote Originally Posted by tirna View Post
    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?

  6. #6
    Join Date
    Mar 2010
    Posts
    2,803
    Quote Originally Posted by Wyn View Post
    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?
    ok, but I was referring to the context of eventually validating your web page in the w3c validator.

    I've never built web pages with multiple elements having the same id so I can't help anymore.

  7. #7
    Join Date
    Dec 2002
    Location
    Pleasanton, CA
    Posts
    2,132
    Quote Originally Posted by tirna View Post
    If you post your code it will be easier to see what is going on.
    Agreed.

  8. #8
    Join Date
    Jun 2005
    Location
    United Kingdom
    Posts
    1,043
    Does this page help? The CSS is downloadable.

  9. #9
    Join Date
    May 2010
    Posts
    6
    Quote Originally Posted by kiwibrit View Post
    Does this page help? The CSS is downloadable.
    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).

  10. #10
    Join Date
    May 2010
    Posts
    109
    Code:
    <!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>
    Last edited by Westerly; 06-06-2010 at 12:37 PM.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles