jQuery CSS - display div's in columns.

Hi,
is there a way to display my div's in columns instead of rows?
First col to have 1,2,3. 2nd col to have 4,5 etc..

Thanks in advance for your feedback.


<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;
	text-indent: 10px;
}
.my_div {
	width: 150px;
	margin: 2px;
	background-color: #999;
	float: left;
	height: 20px;
}

</style>
<title>Untitled Document</title>
</head>
<body>
<div id="my_div_container">
<div style="height:1px;width:100%;clear:both"></div>
<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 style="height:1px;width:100%;clear:both"></div>
</div>
</body>
</html>

Open in new window

sabecsAsked:
Who is Participating?

Improve company productivity with a Business Account.Sign Up

x
 
Gurvinder Pal SinghConnect With a Mentor Commented:
Yes, check this one
<html>
<head>
		<script src="jquery-1.4.2.min.js"></script>
		<script>
			$(document).ready(function(){
				$(".my_div").each(function(){
					var index = $(this).index();
					if( (index % 4) == 0 )
					{
						$(this).before( "<div style='clear:both'/>" );
					}
				});
			});
		</script>
<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;
	text-indent: 10px;
}
.my_div {
	width: 150px;
	margin: 2px;
	background-color: #999;
	float: left;
	height: 20px;
}

</style>
<title>Untitled Document</title>
</head>
<body>
<div id="my_div_container">
<div style="height:1px;width:100%;clear:both"></div>
<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 style="height:1px;width:100%;clear:both"></div>
</div>
</body>
</html>

Open in new window

0
 
Kiran SonawaneProject LeadCommented:
Very Simple. Look at below code. And here is live demo

http://jsfiddle.net/2SXHE/

<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;
  text-indent: 10px;
}
.columns div {
  width: 150px;
  margin: 2px;
  background-color: #999;
  height: 20px;
}

.columns
{
  float:left;
}

</style>
<title>Untitled Document</title>
</head>
<body>
<div id="my_div_container">
<div style="height:1px;width:100%;clear:both"></div>
<div class="columns">
  <div>Contents 1</div>
  <div>Contents 2</div>
  <div>Contents 3</div>
  <div>Contents 4</div>
  <div>Contents 5</div>
</div>
<div class="columns">
  <div>Contents 6</div>
  <div>Contents 7</div>
  <div>Contents 8</div>
  <div>Contents 9</div>
  <div>Contents 10</div>
</div>

<div style="height:1px;width:100%;clear:both"></div>
</div>
</body>
</html>

Open in new window

0
 
DesignbyonyxCommented:
If you didn't want to change your markup, you would have to write some javascript in order for that to work. Either way, you would need to end up with the following:
<style>
.col {
  float:left;
  width: 25%;
}
</style>

<body>
<div id="my_div_container">
<div style="height:1px;width:100%;clear:both"></div>
<div class="col col_1">
  <div class="my_div">Contents 1</div>
  <div class="my_div">Contents 2</div>
  <div class="my_div">Contents 3</div>
</div>
<div class="col col_2">
  <div class="my_div">Contents 4</div>
  <div class="my_div">Contents 5</div>
  <div class="my_div">Contents 6</div>
</div>
<div class="col col_3">
  <div class="my_div">Contents 7</div>
  <div class="my_div">Contents 8</div>
  <div class="my_div">Contents 9</div>
</div>
<div class="col col_4">
  <div class="my_div">Contents 10</div>
  <div class="my_div">Contents 11</div>
</div>
<div style="height:1px;width:100%;clear:both"></div>
</div>
</body>
</html>

Open in new window

0
Get 10% Off Your First Squarespace Website

Ready to showcase your work, publish content or promote your business online? With Squarespace’s award-winning templates and 24/7 customer service, getting started is simple. Head to Squarespace.com and use offer code ‘EXPERTS’ to get 10% off your first purchase.

 
sabecsAuthor Commented:
Thanks for your help, I wan't to be able to do it without changing my markup.
I need to count the total number of divs and evenly place divs in 4-5 columns, is this possible with jquery?
0
 
sabecsAuthor Commented:
Thanks gurvinder372, that's perfect.
0
 
user_nCommented:
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.