?
Solved

jQuery CSS - display div's in columns.

Posted on 2011-09-19
6
Medium Priority
?
252 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
The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

 
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

Take Control of Web Hosting For Your Clients

As a web developer or IT admin, successfully managing multiple client accounts can be challenging. In this webinar we will look at the tools provided by Media Temple and Plesk to make managing your clients’ hosting easier.

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
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
Suggested Courses

593 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