HTML Help

nikki · Joined: 24 Nov 2008 Posts: 132

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

sticks464 · Joined: 31 Dec 2006 Posts: 2311

I'm not sure of what you want. To put two div's on the same row (I assume you mean side by side), use a div to hold both, float both left and give the second one a rule of display-inline. Now you don't have to do this if you have a widths set and the main div width is large enough to hold both div's. They will flow naturally one beside the other.

nikki · Joined: 24 Nov 2008 Posts: 132

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>
 Div 1
 Some Data 
 Some Data 
 Some Data 
 Some Data 
 Some Data 
 Some Data 
 </div>

 <div>
 Div 2
 Some Data 
 Some Data 
 Some Data 
 Some Data 
 Some Data 
 Some Data 
 Some Data 
 Some Data 
 </div>

 <div>
 Div 3
 Some Data 
 Some Data 
 Some Data 
 Some Data 
 Some Data 
 Some Data 
 </div>

 <div>
 Div 4
 Some Data 
 Some Data 
 Some Data 
 Some Data 
 </div>
<div>
 Div 5
 Some Data 
 Some Data 
 Some Data 
 Some Data 
 </div>
<div>
 Div 6
 Some Data 
 Some Data 
 Some Data 
 Some Data 
 </div>
<div>
 Div 7
 Some Data 
 Some Data 
 Some Data 
 Some Data 
 </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.

sticks464 · Joined: 31 Dec 2006 Posts: 2311

Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.mainContainer{
width: 715px;
margin: auto;
}

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

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

.mainContainer div{
border: 1px solid blue;
width: 350px;
margin: 0 10px 8px 0;
float:left;
}

.mainContainer div.last {
margin: 0 0 8px 0;
}

.clearer {
height:1px;
font-size:0px;
clear:both;
}
</style>
</head>

<body>
<div class="mainContainer">

<div>
Div 1
Some Data 
Some Data 
Some Data 
Some Data 
Some Data 
Some Data 
</div>

<div class="last">
Div 2
Some Data 
Some Data 
Some Data 
Some Data 
Some Data 
Some Data 
Some Data 
Some Data 
</div>

 

<div>
Div 3
Some Data 
Some Data 
Some Data 
Some Data 
Some Data 
Some Data 
</div>

<div class="last">
Div 4
Some Data 
Some Data 
Some Data 
Some Data 
</div>

 

<div>
Div 5
Some Data 
Some Data 
Some Data 
Some Data 
</div>

<div class="last">
Div 6
Some Data 
Some Data 
Some Data 
Some Data 
</div>

 

<div>
Div 7
Some Data 
Some Data 
Some Data 
Some Data 
</div>

<div class="last">
Div 8
Some Data 
Some Data 
Some Data 
Some Data 
</div>

</div>
</body>
</html>

nikki · Joined: 24 Nov 2008 Posts: 132

It worked. I really appreciate your help. Thanks a lot.