Solved: jQuery - count divs and put arrange in columns

Is there a way to count the number of div's with class my_div, divide this number by 4 and then arrange div'd in columns using jQuery?

I want to be able to take the code below BEFORE and convert to AFTER using jQuery.

Thanks in advance for your feedback.

BEFORE

<html>
<head>
<style type="text/css">

#my_div_container {
	width: 800px;
	margin: 0 auto;
	height: auto;
	min-height: 40px;
	font-size: 12px;
	line-height: 20px;
	color: #000;
	background-color: #CCC;

}

.column{
  float:left;
  width: 160px;
  height: auto;
}

.my_div {
	width: 160px;
	clear:left;
	margin: 0px;
	padding:3px;
	background-color: #999;
	float: left;
	height: 20px;	
	text-indent: 10px;
}



</style>
<title>Untitled Document</title>
</head>
<body>
<div id="my_div_container">
<div class="my_div">Contents 1</div>
<div class="my_div">Contents 2</div>
<div class="my_div">Contents 3</div>
<div class="my_div">Contents 4</div>
<div class="my_div">Contents 5</div>
<div class="my_div">Contents 6</div>
<div class="my_div">Contents 7</div>
<div class="my_div">Contents 8</div>
<div class="my_div">Contents 9</div>
<div class="my_div">Contents 10</div>
<div class="my_div">Contents 11</div>
<div class="my_div">Contents 12</div>
<div class="my_div">Contents 13</div>
</div>
</body>
</html>

Open in new window

AFTER

<html>
<head>
<style type="text/css">

#my_div_container {
	width: 800px;
	margin: 0 auto;
	height: auto;
	min-height: 40px;
	font-size: 12px;
	line-height: 20px;
	color: #000;
	background-color: #CCC;

}

.column{
  float:left;
  width: 160px;
  height: auto;
}

.my_div {
	width: 160px;
	clear:left;
	margin: 0px;
	padding:3px;
	background-color: #999;
	float: left;
	height: 20px;	
	text-indent: 10px;
}



</style>
<title>Untitled Document</title>
</head>
<body>
<div id="my_div_container">

<div class="column">
<div class="my_div">Contents 1</div>
<div class="my_div">Contents 2</div>
<div class="my_div">Contents 3</div>
</div>

<div class="column">
<div class="my_div">Contents 4</div>
<div class="my_div">Contents 5</div>
<div class="my_div">Contents 6</div>
</div>

<div class="column">
<div class="my_div">Contents 7</div>
<div class="my_div">Contents 8</div>
<div class="my_div">Contents 9</div>
</div>

<div class="column">
<div class="my_div">Contents 10</div>
<div class="my_div">Contents 11</div>
<div class="my_div">Contents 12</div>
</div>

<div class="column">
<div class="my_div">Contents 13</div>

</div>


</div>
</body>
</html>

Open in new window

- after