Solved

jQuery CSS - display div's in columns.

Posted on 2011-09-19
6
237 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
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:
gurvinder372 earned 500 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

Enroll in June's Course of the Month

June's Course of the Month is now available! Every 10 seconds, a consumer gets hit with ransomware. Refresh your knowledge of ransomware best practices by enrolling in this month's complimentary course for Premium Members, Team Accounts, and Qualified Experts.

Question has a verified solution.

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

Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

690 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