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

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

<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

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:

<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.

<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.