jquery equal columns

Neil_Bradley
Neil_Bradley used Ask the Experts™
on
I am working through a jquery solution with the aim of equalizing column widths however the code I am using does not work (despite copying the code exactly from my tutorial file). Can anyone assist?
Here is the test page in question
http://beaconhilldesign.co.nz/jquery/equalcols/equalCols.html
Thanks,
N
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Top Expert 2010

Commented:
Column widths looks the same in Firefox, Chrome, IE7, IE8, Opera and Safari. Did You mean on heights maybe?

Regards
Neil_BradleyWeb UX/UI Developer

Author

Commented:
Apologies, I meant the heights..
Top Expert 2010
Commented:
You're not referencing the jquery-1.3.2.min.js, it doesnt exist on path written in Your code.
Btw, use 1.4.2 version. Here is the code I used and it worked.

Regards

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>col test</title>
<style>
   body {
      font: small/1.3em Arial, Helvetica, sans-serif; }
   .column {
	width: 200px;
	float: right;
	padding: 10px;
	margin-left: 10px;
	padding: 10px;
	 }
   #col1 {
      background-color: red;
	  }
	  #col2 {
      background-color: blue;
   
	  }
	  #col3 {
      background-color: green;
  
	  }
</style>
<script src="jquery-1.4.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
		var colheight = 0;
		$(".column").each(function(){
			if ($(this).height()>colheight) colheight=$(this).height();
		}).css({height:colheight});
	});




</script>


</head>
<body>
<div id="col1" class="column">"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</div>

<div id="col2" class="column">Content for  id "col2" Goes Here</div>
<div id="col3" class="column">Content for  id "col3" Goes Here</div>
   
</body>
</html>

Open in new window

Neil_BradleyWeb UX/UI Developer

Author

Commented:
Thats got it. Thanks for that.
N
Top Expert 2010

Commented:
You're welcome and thanks for the points.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial