?
Solved

jQuery CSS - display div's in columns.

Posted on 2011-09-19
6
Medium Priority
?
241 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
Optimize your web performance

What's in the eBook?
- Full list of reasons for poor performance
- Ultimate measures to speed things up
- Primary web monitoring types
- KPIs you should be monitoring in order to increase your ROI

 
LVL 40

Accepted Solution

by:
gurvinder372 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

On Demand Webinar: Networking for the Cloud Era

Did you know SD-WANs can improve network connectivity? Check out this webinar to learn how an SD-WAN simplified, one-click tool can help you migrate and manage data in the cloud.

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.
In this blog, we’ll look at how improvements to Percona XtraDB Cluster improved IST performance.
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
Suggested Courses

770 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