Hall of Fame

1. mplungjan1,204,382
2. hielo670,889
3. HonorGod596,196
4. kadaba367,332
5. fsze88314,325
6. wilq32222,869
7. Kravimir194,683
8. x_com179,420
9. AlbertVan...168,428
10. b0lsc0tt164,410
11. Zyloch160,485
12. third155,923
13. HainKurt154,877
14. Tomarse...152,408
15. quincydude147,940
16. Badotz147,586
17. abel147,020
18. sunithnair140,188
19. Ray_Pas...136,933
20. alien109121,569
21. TheFoot116,948
22. anoyes104,574
23. cxr104,360
24. Morcalavin97,306
25. sh0e97,300

1. Zvonko6,482,208
2. mplungjan6,016,957
3. hielo4,465,745
4. b0lsc0tt1,642,058
5. third1,475,436
6. Gwynfor...1,351,632
7. devic1,313,415
8. archrajan1,212,417
9. HonorGod1,188,062
10. Zyloch1,073,578
11. pravinasar1,049,201
12. Roonaan958,533
13. Batalf873,511
14. knightEkni...865,934
15. amit_g733,426
16. basicinsti...619,355
17. dakyd577,760
18. CJ_S549,361
19. wilq32545,559
20. gops1544,762
21. callrs523,535
22. jaysolomon489,264
23. Badotz474,117
24. Kravimir453,908
25. stanscott2435,346

	[x] Posted via EE Mobile
	Search, ask, and monitor your questions on the go with EE Mobile. Visit Experts Exchange from your mobile device and never be out of touch again.

Question

	[x] Attachment Details

[x]

The Solution Rating System

With so many solutions, how can you tell which solutions are most likely to help you and which ones are not? To provide you with a tool to use, we rate our solutions based on various elements that most accurately determine if a solution is a quality solution. To explain what factors affect the solution rating, here are the elements we take into consideration when formulating our solution rating.

The Grade of the Solution
The Zone Rank of the Expert Providing the Solution
The Number of Author and Expert Comments
The Number of Experts Contributing
The Feedback of the Community

Your Input Matters
Because of the way the system is set up, the most important variable in this equation is you. As a member of Experts Exchange, you are able to cast your vote on the quality of the solutions in regard to how complete, accurate, helpful and easy to understand each solution is. When you provide your feedback, each rating is adjusted accordingly. So, if you see a solution that has a poor rating that you think is a good solution, let us know by rating it. As you do, the rating will be adjusted and will become more accurate for other members of our site.

If you have any suggestions that you would like to make for our rating system, please ask a question in the Suggestions Zone of Community Support.

Thank you!

6.6

height for neighbor columns

Asked by hankknight in JavaScript, Dynamic HTML (DHTML), Document Object Model

I would like to use JavaScript to make all columns within a row the same height.

There are two types of columns:
<div class="content33">
and
<div class="content50">

The issue is that I want all columns that are next to each other to be the same height.

I found a script that does this:
http://paulbellows.com/getsmart/balance_columns/

but it requires you to identify target columns with an id. I want it to AUTOMATICALLY be applied to all consecutive columns with a class of content33 or content50.

Can you please help me do this?

Thanks!

View the Solution FREE for 30 Days

         
           
             1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62:
63:
64:
65:
66:
67:
68:
69:
70:
71:
72:
73:
74:
75:
76:
77:
78:
79:
80:
81:
82:
83:
84:
85:
86:
87:
88:
89:
90:
91:
92:
93:
94:
95:
96:
97:
98:
99:
100:
101:
102:
103:
104:
105:
106:
107:
108:
109:
110:
111:
112:
113:
114:
115:
116:

           
           
             <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Title</title>
<style type="text/css">
 
html, body {
padding: 0px;
margin: 0px;
widht: 100%;
height: 100%
}
 
#main {
margin: 0px 200px;
padding: 0px;
border: 0px;
display: block;
}
 
#content {
display: block;
margin: 0 5px;
padding: 0 10px;
}
 
.content100 {
width: 100%;
padding: 0px;
margin: 0 .5% 0 .5%;
display: block;
background: #ffeeee;
}
 
.content50 {
width: 48.75%;
display: block;
float: left;
margin: 0 .5% 0 .25%;
padding: 0px;
background: #eeffee;
}
 
.content33 {
width: 32.25%;
display: block;
float: left;
margin: 0 .5% 0 .25%;
padding: 0px;
background: #eeeeff;
}
 
.insideClear {
width: 100%;
height: 1px;
overflow: hidden;
display: block;
}
 
</style>
</head>
<body>
<div id="content">
 
<div id="main">
 
<div class="content50">
  <h2>Row 1, Column 1</h2>
  In nec est pretium elit eleifend semper. Suspendisse potenti. Nunc bibendum sollicitudin ante. Aliquam facilisis mi quis turpis. Nullam aliquet. Sed eget urna in metus mattis luctus. Sed nunc. Maecenas est. Morbi ullamcorper eros non magna. Donec auctor, orci pretium rutrum eleifend, pede arcu pretium dui, vitae vestibulum ante odio sit amet dui. Aliquam fringilla velit sit amet magna. Proin cursus, elit quis faucibus fermentum, diam tellus rhoncus nulla, ut iaculis orci velit id metus. Pellentesque diam metus, dapibus eu, vestibulum quis, elementum id, turpis. Morbi elementum, quam non rhoncus hendrerit, metus lacus bibendum ante, vitae sodales velit est eu neque. 
</div>
 
<div class="content50">
  <h2>Row 1, Column 2</h2>
  This column is not very high.
</div>
<div class="insideClear"></div>
<div class="content100">
  This content is in a single column that streaches from one end of the area to the other.  Nullam aliquet. Sed eget urna in metus mattis luctus. Sed nunc. Maecenas est. Morbi ullamcorper eros non magna. Donec auctor, orci pretium rutrum eleifend, pede arcu pretium dui, vitae vestibulum ante odio sit amet dui. Aliquam fringilla velit sit amet magna. Proin cursus, elit quis faucibus fermentum, diam tellus rhoncus nulla, ut iaculis orci velit id metus. Pellentesque diam metus, dapibus eu, vestibulum quis, elementum id, turpis. Morbi elementum, quam non rhoncus hendrerit, metus lacus bibendum ante, vitae sodales velit est eu neque. 
</div>
 
<div class="content33">
  <h2>Row 2 Column 1</h2>
  Felis turpis tristique odio, nec accumsan velit ipsum eu tellus. Duis vel felis. Maecenas in arcu nec nisi cursus consectetuer. Ut ac felis. Mauris aliquet lectus quis nisl. Aliquam quis urna quis diam facilisis imperdiet. Curabitur sit amet eros. Curabitur purus. In arcu magna, bibendum varius, elementum non, cursus eget, nulla. Etiam vulputate velit. Sed interdum leo in ligula. Sed non justo id odio bibendum tincidunt. Sed dictum, ipsum eget blandit luctus, nisi felis rhoncus nisl, sodales imperdiet neque quam id mauris.  
</div>
<div class="content33">
  <h2>Row 2 Column 2</h2>
  This column is not as high as the previous one.
</div>
<div class="content33">
  <h2>Row 2 Column 3</h2>
</div>
<div class="insideClear"></div>
<div class="content100">
  Nunc vel arcu. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam luctus tellus luctus magna. Aenean tellus sapien, venenatis id, hendrerit sit amet, lacinia sed, ante. Nullam metus. Sed cursus lobortis orci. Etiam suscipit, tellus ut rutrum mollis, urna libero ultrices lectus, non hendrerit quam elit id leo. Quisque sollicitudin, mi id imperdiet sollicitudin, orci enim rutrum nibh, non adipiscing diam augue commodo nunc. Maecenas erat massa, sagittis eu, sagittis at, commodo nec, dolor. Aliquam erat volutpat. Donec nisl erat, vulputate id, dictum non, vulputate egestas, sapien. Fusce non justo eu felis imperdiet placerat. Suspendisse mattis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut ac tellus eget risus varius vehicula. In ante. 
</div>
 
<div class="content33">
  <h2>Row 2 Column 1</h2>
  This is a short column.  
</div>
<div class="content33">
  <h2>Row 2 Column 2</h2>
  Felis turpis tristique odio, nec accumsan velit ipsum eu tellus. Duis vel felis. Maecenas in arcu nec nisi cursus consectetuer. Ut ac felis. Mauris aliquet lectus quis nisl. Aliquam quis urna quis diam facilisis imperdiet. Curabitur sit amet eros. Curabitur purus. In arcu magna, bibendum varius, elementum non, cursus eget, nulla. Etiam vulputate velit. Sed interdum leo in ligula. Sed non justo id odio bibendum tincidunt. Sed dictum, ipsum eget blandit luctus, nisi felis rhoncus nisl, sodales imperdiet neque quam id mauris.
</div>
<div class="content33">
  <h2>Row 2 Column 3</h2>
  This is a column with little in it. 
</div>
<div class="insideClear"></div>
 
</div>
</div>
 
</body>
</html>
           
         

20091021-EE-VQP-81 / EE_QW_EXPERT_20070906

height for neighbor columns

Asked by hankknight in JavaScript, Dynamic HTML (DHTML), Document Object Model

About this solution