Query Results in Column

WilliamMute007 · Sep 14, 2009

Can anyone please help if you can? Really appreciate it.

I have this prblem and its doing my head in. I have an SQL query which simply syuppose to return the result of a query in two columns using DIVs one on the left and one on the right.

Please see code:

Code:

while ($row = mysql_fetch_assoc($result)){
            ?>
<div id="latest">
	    			    <div class="product">
	    			    	<h4><? echo $row['firstname'];?></h4>
	    			    	<img src="images/<? echo $row['image'];?>" alt="" />
	    			    	<p><? echo $row['summary'];?></p>
	    			    	<p class="price">Price: <span>$29.95</span></p>
	    			    	<p><a href="consultant" class="more">Become a consultant</a> <a href="" class="add">Career Path</a></p>
	    			    </div>
  </div><!-- /latest -->                       
 

 <div id="best">
	    			
	    	            <div class="product">
	    			    	<h4><? echo $row['firstname'];?></h4>
	    			    	<img src="images/<? echo $row['image'];?>" alt="something" />
	    			    	<p><? echo $row['summary'];?></p>
	    			    	<p class="price">Price: <span>$29.95</span></p>
	    			    	<p><a href="consultant" class="more">Become a consultant</a> <a href="" class="add">Career Path</a></p>
	    			     </div>
                         
                                
	
   </div><!-- /best -->
			
	
<? } ?>

The problem is, it works fine, but everything is coming out on the left DIV only (<div id="best">)

Any suggestions?

Thanks in advance

vacunita · Sep 14, 2009

Works for me, maybe your CSS is causing it to look like its all in the same column.

Other than that, your code looks o.k to me.

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Geates · Sep 14, 2009

Does the fact that the code rebuilds the 'best' and 'latest' DIVs with every iteration of mysql_fetch_assoc($result) present any problem? Perhaps you should make each DIV unique by adding a counter or the row$['firstname'].

Code:

<div id="latest_<? echo $row['firstname']; ?>">

-Geates

vacunita · Sep 14, 2009

No likely. While ID's should be unique, there is no actual operational problems with having repeated ID's.

And its highly unlikely he'll have enough ID's predefined in the CSS to cover however many names he has in the Database.

So the easiest approach would be to change them to classes.

But that in know way affects the display. I'd still think its a CSS style applied to them that's casing it to look like its all the same column.

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Geates · Sep 14, 2009

would the div display need to be inline to accomplish this?

-Geates

vacunita · Sep 14, 2009

Floated most probably.

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Vragabond · Sep 14, 2009

Maybe we should start at the beginning. What does your generated html look like?

And vacunita is not entirely correct -- when you have multiple ids on one page, there can be rendering problems in browsers. So, your first thing to change should still be changing the id to class.

[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]

vacunita · Sep 14, 2009

Really? Like what? I've never encountered any, not that I use the same ID on multiple elements anyway.

Basically, accessing each element in javascript will be an impossibility yes, and the page will never validate, but other than that, I can find nothing going wrong in either IE or FF, when I have 155 elements with the same ID in terms of the style applied to them.

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

WilliamMute007 · Sep 15, 2009

Hi Guys,

Thank you for your responses, I really appreciate it. The problem is a weired one as, If I was doing the whole thing in HTML, it works perfectly i.e below

Code:

				<div id="products">

					<div id="latest">
	    			
	    			    <div class="product">
	    			    	<h4>Latest dictum arcu diam</h4>
	    			    	<img src="images/image02.jpg" alt="" />
	    			    	<p>Lorem ipsum dolo adipiscing elit. Etia sit amet vehicula.</p>
	    			    	<p class="price">Price: <span>$29.95</span></p>
	    			    	<p><a href="product.html" class="more">More info</a> <a href="" class="add">Add to cart</a></p>
	    			    </div>
	    			    

	    			    
	    			</div><!-- /latest -->
	    			
	    			<div id="best">
	    			
	    			    <div class="product">
	    			    	<h4>Best dictum arcu diam</h4>
	    			    	<img src="images/image02.jpg" alt="" />
	    			    	<p>Lorem ipsum dolo adipiscing elit. Etia sit amet vehicula.</p>
	    			    	<p class="price">Price: <span>$29.95</span></p>
	    			    	<p><a href="" class="more">More info</a> <a href="" class="add">Add to cart</a></p>
	    			    </div>
	    			  
	    			    
	    			</div><!-- /best -->
					
				</div><!-- /products -->

The problem is only when I now turn the process into dynamic then the <Best> DIV and the <Latest> DIV both merge together in one column (left column). What is suppose to happen is the <letest> DIV on the left column and the <Best> Div on the right.

Here is my CSS Code for any CSS experts as am not too sure where the problem lies

Code:

#content #main #products #latest,#content #main #products #best {
position:absolute;
top:0;
left:0 !important;
}

#content #main #latest .product,#content #main #best .product {
background:#fff;
width:224px;
float:left;
margin:0 28px 15px 0;
padding:20px 14px 15px;
}

#content #main #latest .even,#content #main #best .even {
margin-right:0;
}

#content #main #latest .product h4,#content #main #best .product h4 {
font-size:14px;
color:#ff339d;
background:url(../images/bg_dotted.jpg) bottom no-repeat;
margin:0 0 10px;
padding:0 0 10px;
}

#content #main #latest .product p.price,#content #main #best .product p.price {
font-size:12px;
font-weight:700;
color:#868686;
}

#content #main #latest .product .more,#content #main #best .product .more {
display:block;
float:left;
width:84px;
height:28px;
background:url(../images/bg_moreinfo.jpg) top no-repeat;
text-indent:-9999px;
margin:0 15px 0 0;
}

#content #main #latest .product .add,#content #main #best .product .add {
display:block;
float:left;
width:84px;
height:28px;
background:url(../images/bg_addtocart.jpg) 0 0 no-repeat;
text-indent:-9999px;
}

Thats the whole code for that section.

Thank you for your help.

jpadie · Sep 15, 2009

you might want to wrap your echo statements with htmlspecialchars() to ensure that the mark-up is not broken by weird characters in the database fields.

WilliamMute007 · Sep 15, 2009

Hi Justin,

Thanks for the reply. Would it be something like this below? I have never used htmlspecialchars before and tried looking it up but dont quiet get it.

htmlspecialchars(" echo $row['firstname'], ENT_QUOTES);

Thanks

jpadie · Sep 15, 2009

echo htmlspecialchars($row['firstname']);

but i doubt whether that is the end of the story. you need to post the html that you get from the dynamic output so that we can see where the mark up is breaking.

WilliamMute007 · Sep 15, 2009

Thanks..

Here is the Outputted HTML as requested

Code:

 <div id="products">
     
					
                    
                     
                     <div id="latest">
	    			    <div class="product">
	    			    	<h4>Uvi</h4>
	    			    	<img src="images/image01.jpg" alt="" />
	    			    	<p>Uvi founded Mary Kay in 1900's and has become one of the most influencial web developer in this modern age.  </p>

	    			    	<p class="price">Price: <span>$29.95</span></p>
	    			    	<p><a href="consultant" class="more">Become a consultant</a> <a href="" class="add">Career Path</a></p>
	    			    </div>
  </div><!-- /latest -->                       
 

 <div id="best">
	    			
	    	            <div class="product">
	    			    	<h4>Uvi</h4>

	    			    	<img src="images/image01.jpg" alt="something" />
	    			    	<p>Uvi founded Mary Kay in 1900's and has become one of the most influencial web developer in this modern age.  </p>
	    			    	<p class="price">Price: <span>$29.95</span></p>
	    			    	<p><a href="consultant" class="more">Become a consultant</a> <a href="" class="add">Career Path</a></p>
	    			     </div>
                         
                                
	
   </div><!-- /best -->

			
	
<div id="latest">
	    			    <div class="product">
	    			    	<h4>Ono</h4>
	    			    	<img src="images/image02.jpg" alt="" />
	    			    	<p>Uvi founded Mary Kay in 1900's and has become one of the most influencial web developer in this modern age. </p>
	    			    	<p class="price">Price: <span>$29.95</span></p>
	    			    	<p><a href="consultant" class="more">Become a consultant</a> <a href="" class="add">Career Path</a></p>

	    			    </div>
  </div><!-- /latest -->                       
 

 <div id="best">
	    			
	    	            <div class="product">
	    			    	<h4>Ono</h4>
	    			    	<img src="images/image02.jpg" alt="something" />
	    			    	<p>Uvi founded Mary Kay in 1900's and has become one of the most influencial web developer in this modern age. </p>
	    			    	<p class="price">Price: <span>$29.95</span></p>

	    			    	<p><a href="consultant" class="more">Become a consultant</a> <a href="" class="add">Career Path</a></p>
	    			     </div>
                         
                                
	
   </div><!-- /best -->
			
	
<div id="latest">
	    			    <div class="product">
	    			    	<h4>Ekpoba</h4>
	    			    	<img src="images/image02.jpg" alt="" />

	    			    	<p>Uvi founded Mary Kay in 1900's and has become one of the most influencial web developer in this modern age. </p>
	    			    	<p class="price">Price: <span>$29.95</span></p>
	    			    	<p><a href="consultant" class="more">Become a consultant</a> <a href="" class="add">Career Path</a></p>
	    			    </div>
  </div><!-- /latest -->                       
 

 <div id="best">

	    			
	    	            <div class="product">
	    			    	<h4>Ekpoba</h4>
	    			    	<img src="images/image02.jpg" alt="something" />
	    			    	<p>Uvi founded Mary Kay in 1900's and has become one of the most influencial web developer in this modern age. </p>
	    			    	<p class="price">Price: <span>$29.95</span></p>
	    			    	<p><a href="consultant" class="more">Become a consultant</a> <a href="" class="add">Career Path</a></p>

	    			     </div>
                         
                                
	
   </div><!-- /best -->
			
	
<div id="latest">
	    			    <div class="product">
	    			    	<h4>Odeab</h4>
	    			    	<img src="images/image01.jpg" alt="" />
	    			    	<p>Uvi founded Mary Kay in 1900's and has become one of the most influencial web developer in this modern age. </p>
	    			    	<p class="price">Price: <span>$29.95</span></p>

	    			    	<p><a href="consultant" class="more">Become a consultant</a> <a href="" class="add">Career Path</a></p>
	    			    </div>
  </div><!-- /latest -->                       
 

 <div id="best">
	    			
	    	            <div class="product">
	    			    	<h4>Odeab</h4>
	    			    	<img src="images/image01.jpg" alt="something" />

	    			    	<p>Uvi founded Mary Kay in 1900's and has become one of the most influencial web developer in this modern age. </p>
	    			    	<p class="price">Price: <span>$29.95</span></p>
	    			    	<p><a href="consultant" class="more">Become a consultant</a> <a href="" class="add">Career Path</a></p>
	    			     </div>
                         
                                
	
   </div><!-- /best -->
			
	


   </div><!-- /products -->

I only put the part that mattered up. Dont knw if you want me to put the whole page as its quiet long. Let me know please.

Thank you for your help.

WilliamMute007 · Sep 15, 2009

I have also tried changing the ID's to Class as suggested by vacunita but dint make any difference

jpadie · Sep 15, 2009

from a brief glance I can see nothing wrong with the html markup.

WilliamMute007 · Sep 15, 2009

You are right, the HTML outputs fine when the code is examine. But it displays incorrectly. oh I dont know.

Thanks for your attempts though

vacunita · Sep 15, 2009

The best thing I can suggest, is to drop the absolute positioning on the elements, and give #best and #latest a float:left directly.

Code:

#best{
float:left;
}

#latest{
float:left;
}

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

jpadie · Sep 15, 2009

I agree with Phil. go back to the very most basic structure and add complexity when each bit is working.

Code:

#products{overflow-y:hidden; width: 800px;}
.product{float:left; width:45%; border: solid 1px black;padding:right: 5px;}

assuming you want them to stack across the page in two columns.

WilliamMute007 · Sep 15, 2009

Thank you guys for all your efforts but neither of the two suggestions seems to have resolved it. I think am gonna change the layout style to an easier one. I really Really appreciate your contribution though.

Thank you

vacunita · Sep 15, 2009

Try adding a <p> tag to clear the floats after each set.

Code:

   ... 
   </div><!-- /best -->
[red]<p style="clear:both;"></p>[/red]
...

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Query Results in Column

Programmer

Programmer

Programmer

Programmer

Programmer

Programmer

Programmer

Programmer

Programmer

Technical User

Programmer

Technical User

Programmer

Programmer

Technical User

Programmer

Programmer

Technical User

Programmer

Programmer

Similar threads

Log in

Part and Inventory Search

Sponsor