Arranging div tags

jolly_nikki · 10-22-2009, 06:12 PM

I am looping through an array to display content in div tag. I want 2 div tags in one row. Could someone post code showing how this can be done.

met · 10-22-2009, 08:21 PM

PHP Code:


			
echo '<div id="tag1"><div id="tag2"></div></div>';
/* ? _ ? */

post some code and elaborate

whizard · 10-22-2009, 08:57 PM

DIV tags are block elements and therefore display on a fresh line. You can either use <span> tags instead, or use CSS to redefine the div as an inline element:

.mydiv
{
display:inline;
}

Dan

jolly_nikki · 10-22-2009, 09:38 PM

Below is the code

Code:

<html>
	<head>
		<style>
		    .mainContainer{
						width: 98%;
						margin: auto;
					}

					.mainContainer p{
						font-weight: bold;
						font-size: 12px;
						color: white;
						background-color: blue;
						width: 350px;
					    margin: 0px;
					}

					.mainContainer span{
						font-size: 10px;
						color: #333333;
						padding: 4px;
						width: 350px;
					}

					.mainContainer div{
						border: 1px solid blue;
					    width: 350px;
					    margin-bottom: 8px;
					}
			
		</style>
	</head>

	<body>
		<div class = "mainContainer">
			<div>
			    <p>Div 1</p>
			       <span>Some Data</span> <br/> 
					<span>Some Data</span> <br/>  
					<span>Some Data</span> <br/>  
					<span>Some Data</span> <br/>  
					<span>Some Data</span> <br/>  
					<span>Some Data</span> <br/>  
			  </div>
			
			  <div>
			    <p>Div 2</p>
			       <span>Some Data</span> <br/>  
					<span>Some Data</span> <br/>  
					<span>Some Data</span> <br/>  
					<span>Some Data</span> <br/>  
					<span>Some Data</span> <br/>  
					<span>Some Data</span> <br/>  
					<span>Some Data</span> <br/>  
					<span>Some Data</span> <br/>  
			  </div>
			
			  <div>
			    <p>Div 3</p>
			       <span>Some Data</span> <br/>  
					<span>Some Data</span> <br/>  
					<span>Some Data</span> <br/>  
					<span>Some Data</span> <br/>  
					<span>Some Data</span> <br/>  
					<span>Some Data</span> <br/>  
			  </div>
			  
			  <div>
			    <p>Div 4</p>
			       <span>Some Data</span> <br/>  
					<span>Some Data</span> <br/>  
					<span>Some Data</span> <br/>  
					<span>Some Data</span> <br/>  
				</div>
                               ----
			</div>
		</body>
</html>

I would like to display Div1 and Div2 in one row and Div3 and Div4 in second row and so on. This is a popup window with 800px as width and 600px as height and is scrollable.

Scriptet · 10-22-2009, 09:49 PM

Add float:left; to maincontainer div and then make sure the width of the div is exactly half of the window size.

jolly_nikki · 10-22-2009, 10:22 PM

Quote:

Originally Posted by Scriptet

Add float:left; to maincontainer div and then make sure the width of the div is exactly half of the window size.

Adding float: left; to main container moved the divs to left of the page but not 2 divs in same line. The width of the page is 800px and i have set the width of the div to 350px.

Scriptet · 10-22-2009, 10:27 PM

Sorry I meant add float: left; to the .maincontainer div selector like:

Code:

<style>
.mainContainer{
  width: 98%;
  margin: auto;
  overflow:auto;
}
.mainContainer p{
  font-weight: bold;
  font-size: 12px;
  color: white;
  background-color: blue;
  width: 350px;
  margin: 0px;
}
.mainContainer span{
  font-size: 10px;
  color: #333333;
  padding: 4px;
  display:block;
  width: 350px;
}
.mainContainer div{
  border: 1px solid blue;
  width: 350px;
  margin-bottom: 8px;
  float:left;
}			
</style>

The changes are highlighted in bold. You need overflow:auto; so that the container wraps around the DIV's which are now floated side by side.
The third change adding display:block is required if you want to set a width on a SPAN, otherwise it will just ignore the width you set.

jolly_nikki · 10-22-2009, 10:56 PM

That did help to some extent.
Div 5 should be below Div3 but its below Div4.

Scriptet · 10-23-2009, 04:23 PM

One way I can think of would be to give every other div (div numbers 3,5,7,9 etc...) a seperate class, and then you add clear:left; to that class.

The other way would be to wrap every 2 DIV's in another DIV so the next one forces below the largest DIV e.g.

Code:

<div id="container">
<div>Some Text</div>
<div>SomeText</div>
</div>
<div id="container">
<div>Some Text</div>
<div>SomeText</div>
</div>

First method requires an extra class, second method requires a bit of extra markup..

jolly_nikki · 10-23-2009, 06:50 PM

The first idea worked very well for me. Thanks a lot. I really appreciate it.