[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

jQuery CSS - display div's in columns.

Posted on 2011-09-19
6
Medium Priority
?
250 Views
Last Modified: 2012-05-12
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

0
Comment
Question by:sabecs
6 Comments
 
LVL 17

Expert Comment

by:sonawanekiran
ID: 36564715
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
 
LVL 14

Expert Comment

by:Designbyonyx
ID: 36564725
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
 

Author Comment

by:sabecs
ID: 36564862
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
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 40

Accepted Solution

by:
Gurvinder Pal Singh earned 2000 total points
ID: 36564869
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
 

Author Comment

by:sabecs
ID: 36567063
Thanks gurvinder372, that's perfect.
0
 
LVL 9

Expert Comment

by:user_n
ID: 36571813
0

Featured Post

Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
This article discusses how to implement server side field validation and display customized error messages to the client.
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
Suggested Courses

834 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question