Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 10 of 10
  1. #1
    New Coder
    Join Date
    Aug 2009
    Posts
    94
    Thanks
    0
    Thanked 16 Times in 16 Posts

    Arranging div tags

    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.

  • #2
    met
    met is offline
    Regular Coder
    Join Date
    Oct 2009
    Location
    United Kingdom
    Posts
    728
    Thanks
    4
    Thanked 119 Times in 119 Posts
    PHP Code:
    echo '<div id="tag1"><div id="tag2"></div></div>';
    /* ? _ ? */ 
    post some code and elaborate

  • #3
    Senior Coder whizard's Avatar
    Join Date
    Jan 2005
    Location
    Philadelphia, PA, USA
    Posts
    1,662
    Thanks
    14
    Thanked 76 Times in 76 Posts
    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
    PHP Tip: If you want to use short tags (<? or <?=$var) then make sure short_open_tag is set to "1". It really helps.

    Don't forget to save everyone time and mark your thread as Resolved :)

    "Also note that it is your responsibility to die() if necessary."

    DON'T USE THE MYSQL_ EXTENSION

  • #4
    New Coder
    Join Date
    Aug 2009
    Posts
    94
    Thanks
    0
    Thanked 16 Times in 16 Posts
    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.

  • #5
    Regular Coder
    Join Date
    Apr 2008
    Posts
    685
    Thanks
    15
    Thanked 105 Times in 104 Posts
    Add float:left; to maincontainer div and then make sure the width of the div is exactly half of the window size.

  • #6
    New Coder
    Join Date
    Aug 2009
    Posts
    94
    Thanks
    0
    Thanked 16 Times in 16 Posts
    Quote Originally Posted by Scriptet View Post
    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.

  • #7
    Regular Coder
    Join Date
    Apr 2008
    Posts
    685
    Thanks
    15
    Thanked 105 Times in 104 Posts
    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.

  • #8
    New Coder
    Join Date
    Aug 2009
    Posts
    94
    Thanks
    0
    Thanked 16 Times in 16 Posts
    That did help to some extent.
    Div 5 should be below Div3 but its below Div4.
    Attached Thumbnails Attached Thumbnails Arranging div tags-divs.gif  

  • #9
    Regular Coder
    Join Date
    Apr 2008
    Posts
    685
    Thanks
    15
    Thanked 105 Times in 104 Posts
    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..

  • #10
    New Coder
    Join Date
    Aug 2009
    Posts
    94
    Thanks
    0
    Thanked 16 Times in 16 Posts
    The first idea worked very well for me. Thanks a lot. I really appreciate it.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •