How to use a div inside a while loop

I have a member directory that sorts members by institution, so for example, if there are 10 people from the same institution I want to display all 10 people on the same page.  

I am new to liquid design and using <div>, but I am trying and this is where I am having problems.  As you can see in the code below I created a loop statement to pull all of the members who are from the same institution out of the database.  I also created a couple of divs to format the information, the ones that are giving me trouble are <div id='profile_left'> and <div id='profile_right'>.  Because these divs are set to float: left they stack across the page instead of displaying the first user then skipping down a space and displaying the second user.  I tried to fix this by adding a <div id ='profile wrapper'>, but I don't understand how to make that work either... it writes multiple people's information over-top of each other.  

What is the best way to handle this?  do I need the wrapper? I'm new to divs so I apologize is this is a newbie question.
<?PHP
 
include'start.php';
 
$_GET["sorter"];
$sorter = $_GET["sorter"];
 
$_GET["id"];
$id = $_GET["id"];
 
if (($sorter=="") || ($id=="")){
echo "<meta http-equiv='Refresh' content='0;URL=directory.php>";
}
 
echo "<br><div id='body_header'>" . $id . "</div><br>" ;
 
$query = mysql_query("SELECT * FROM users WHERE institution = '".$id."' ORDER BY rank DESC, last_name ASC") 
or die(mysql_error()); 
 
while($queryArray = mysql_fetch_array( $query )) 
{
 
print "<div id='body_font'><div id='profile_wrapper'><div id='profile_left'><p align='left'><img src= ../agteacher/uploaded_pics/" . $queryArray['file_name'] . " width='180'></p>" ;
 
echo "</div><div id='profile_right'>";
print "<p>" ;
if ($queryArray['institution']!=="") {
print "<b>" . $queryArray['institution'] . "</b><br><br>" ;
}
if ($queryArray['first_name']!=="") {
print "<span class='header'>Name:</span> <span class='bodytext'>" ;
print $queryArray['first_name'] ;
if ($queryArray['middle_name']!==""){
print " " . $queryArray['middle_name'] ;
}
print " " . $queryArray['last_name'] . "</span><br><br>" ;
}
print "<span class='header'>My V-Card:</span>&nbsp;&nbsp;<span class='bodytext'><a href=vcard.php?id=" . $id . " target='_blank'>Add " . $queryArray['first_name'] . " " . $queryArray['middle_name'] . " " . $queryArray['last_name'] . " to contacts<span></a>  &nbsp; <a href=vcard.php?id=" . $id . " target='_blank'><img border='0' src=vcard.gif width='25'></a><br>";
if ($queryArray['organization']!=="") {
print "<br><span class='header'>Organization:</span> <span class='bodytext'>" .  $queryArray['organization'] . "</span><br>" ;
}
if ($queryArray['university']!=="") {
print "<br><span class='header'>University:</span> <span class='bodytext'>" .  $queryArray['university'] . "</span><br>" ;
}
if ($queryArray['department']!=="") {
print "<span class='header'>Department:</span> <span class='bodytext'>" .  $queryArray['department'] . "</span><br>" ;
}
if ($queryArray['district_name']!=="") {
print "<span class='header'>District Name:</span><span class='bodytext'>" . $queryArray['district_name'] . "</span><br>" ;
}
if ($queryArray['chapter_id']!=="") {
print "<span class='header'>Chapter ID:</span><span class='bodytext'>" . $queryArray['chapter_id'] . "</span><br>" ;
}
if ($queryArray['email']!=="") {
print "<br><span class='header'>Email:</span><span class='bodytext'> <a href='mailto:" .  $queryArray['email'] . "'>" . $queryArray['email'] . "</span></a><br>" ;
}
if ($queryArray['dept_phone']!=="") {
print "<span class='header'>Department Phone:</span> <span class='bodytext'>" . $queryArray['dept_phone'] . " " . $queryArray['dept_phone_ext'] . "</span><br>" ;
}
if ($queryArray['work_phone']!=="") {
print "<span class='header'>Work Phone:</span> <span class='bodytext'>" . $queryArray['work_phone'] . "</span><br>" ;
}
if ($queryArray['work_cell']!=="") {
print "<span class='header'>Work Cell:</span> <span class='bodytext'>" . $queryArray['work_cell'] . "</span><br>" ;
}
if ($queryArray['work_fax']!=="") {
print "<span class='header'>Work Fax:</span> <span class='bodytext'>" . $queryArray['work_fax'] . "</span><br>" ;
}
if ($queryArray['work_address_1']!=="" || $queryArray['work_address_2']!=="" || $queryArray['work_city']!=="" || $queryArray['work_state']!=="") {
print "<br><span class='header'>Work Address:</span><br>";
}
if ($queryArray['work_address_1']!=="") {
print "<span class='bodytext'>" . $queryArray['work_address_1'] . "</span><br>" ;
}
if ($queryArray['work_address_2']!=="") {
print "<span class='bodytext'>" . $queryArray['work_address_2'] . "</span><br>" ;
}
if ($queryArray['work_city']!=="") {
print  "<span class='bodytext'>" . $queryArray['work_city'] . "</span>";
}
if ($queryArray['work_city']!==""){
print  "<span class='bodytext'>" . ", </span>";
}
if ($queryArray['work_state']!=="") {
print  "<span class='bodytext'>" . $queryArray['work_state'] . "  " . $queryArray['work_zip']. "</span><br>" ;
}
 
if(isset($_SESSION['username'])) {
 
if ($queryArray['home_address_1']!=="" || $queryArray['home_address_2']!=="" || $queryArray['home_city']!=="" || $queryArray['home_state']!=="") {
print "<br><span class='header'>Home Address:</span><br>";
}
if ($queryArray['home_address_1']!=="") {
print "<span class='bodytext'>" . $queryArray['home_address_1'] . "</span><br>" ;
}
if ($queryArray['home_address_2']!=="") {
print "<span class='bodytext'>" . $queryArray['home_address_2'] . "</span><br>" ;
}
if ($queryArray['home_city']!=="") {
print  "<span class='bodytext'>" . $queryArray['home_city'] . "</span>";
}
if ($queryArray['home_city']!==""){
print  "<span class='bodytext'>" . ", </span>";
}
if ($queryArray['home_state']!=="") {
print  "<span class='bodytext'>" . $queryArray['home_state'] . "  " . $queryArray['home_zip']. "</span><br>" ;
}
if ($queryArray['home_phone']!=="") {
print "<br><span class='header'>Home Phone:</span> <span class='bodytext'>" . $queryArray['home_phone'] . "</span><br>" ;
}
if ($queryArray['home_cell']!=="") {
print "<span class='header'>Home Cell:</span> <span class='bodytext'>" . $queryArray['home_cell'] . "</span><br>" ;
}
 
}
 
if ($queryArray['teaching_exp']!=="") {
print "<br><span class='header'>Teaching Experience:</span><br><span class='bodytext'> " . $queryArray['teaching_exp'] . "<br>" ;
}
if ($queryArray['first_year']=="Yes") {
print "<br><span class='header'>First Year:</span><span class='bodytext'> Yes<br>" ;
}
if ($queryArray['degree_1']!=="" || $queryArray['degree_2']!=="" || $queryArray['degree_3']!=="" ) {
print "<br><span class='header'>Education:</span><br>";
}
if ($queryArray['degree_1']!=="") {
print "<span class='bodytext'>" . $queryArray['degree_1'] . "<br>" ;
}
if ($queryArray['degree_2']!=="") {
print "<span class='bodytext'> " . $queryArray['degree_2'] . "<br>" ;
}
if ($queryArray['degree_3']!=="") {
print "<span class='bodytext'>" . $queryArray['degree_3'] . "<br>" ;
}
echo "<hr></div></div><br>";
}
 
include 'end.php';
?>
 
 
 
Below here is the css --------------------------------------------------------------------
 
 
 
/* Set the container properties */
#wrapper
{
background-image:url(images/background.png);
background-repeat:repeat-y;
background-position: 25% 0;
}
 
#header
{
background:url(images/s2.png);
height:180px;
margin-left: 0;
}
 
#container {
  border:solid 10px  #333366;
}
 
html, body {
  margin: 0px;
  padding: 0px;
} 
 
#col1
{
float: left;
width: 20%;
display: inline;
}
 
#col2
{
float: left;
width: 75%;
margin-left: 1%;
}
 
#profile_wrapper
{
position: absolute; left: 250px;
margin-left: 1%;
}
 
#profile_left
{
float: left;
width: 200px;
margin-left: 1%;
}
 
#profile_right
{
float: left;
margin-left: 1%;
}
 
#footer
{
height: 12px;
background-color: #333366;
color: #FFFFFF;
clear: both;
}
 
/* Set the font properties for the menu */
#menu_font
{
font-size: 1.0em;
font-weight: bold;
font-family: Verdana, Arial, Helvetica, sans-serif; 
color:#FFFFFF;}
 
/* Set hyperlink properties for the body */
a:link {
text-decoration: none;
color:#000099;
}
a:visited {
text-decoration: none;
color:#000099;
}
a:hover {
text-decoration: underline;
color:#000099;
}
a:active {
text-decoration: none;
color:#000099;
}
 
/* Set hyperlink properties for the menu */
a.menu:link {
text-decoration: none;
color:#FFFFFF;
}
a.menu:visited {
text-decoration: none;
color:#FFFFFF;
}
a.menu:hover {
text-decoration: underline;
color:#FFFFFF;
}
a.menu:active {
text-decoration: none;
color:#FFFFFF;
}
 
/* Set font properties */
#header_font
{
font-size: 2.0em;
font-weight: bold;
font-family: Verdana, Arial, Helvetica, sans-serif; 
}
 
#body_header
{
font-size: 1.0em;
font-weight: bold;
font-family: Verdana, Arial, Helvetica, sans-serif; 
}
 
#body_font
{
font-size: 1.0em;
font-family: Verdana, Arial, Helvetica, sans-serif; 
 
}
 
#footer_font
{
font-size: 1.0em;
font-family: Verdana, Arial, Helvetica, sans-serif; 
}

Open in new window

jbpeakeAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

profyaCommented:
You need to use padding to the style of the div.
0
absxCommented:
Hi,

Several comments:
 - The "id" property is supposed to contain a unique identifier. No two elements on the same page should have the same id. In your example, "class" should be used instead, as you're only defining formatting groups.
 - The <div id="profile_right"> tag never gets closed.
 - In this case you don't necessarily need the profile_wrapper. I've pasted an example of how the formatting could be handled using overflow and relative padding to the left.
<html>
<head><style>
 
 
 
 
/* Set the container properties */
.wrapper
{
background-image:url(images/background.png);
background-repeat:repeat-y;
background-position: 25% 0;
}
 
.header
{
background:url(images/s2.png);
height:180px;
margin-left: 0;
}
 
.container {
border:solid 10px  #333366;
}
 
html, body {
margin: 0px;
padding: 0px;
font-size: 1.0em;
font-family: Verdana, Arial, Helvetica, sans-serif; 
 
} 
 
.col1
{
float: left;
width: 20%;
display: inline;
}
 
.col2
{
float: left;
width: 75%;
margin-left: 1%;
}
 
.profile_left
{
float:left;
width: 200px;
padding-left: 250px;
margin-left: 1%;
}
 
.profile_right
{
overflow:auto;
margin-left: 1%;
}
 
.footer
{
height: 12px;
background-color: #333366;
color: #FFFFFF;
clear: both;
}
 
/* Set the font properties for the menu */
.menu_font
{
font-size: 1.0em;
font-weight: bold;
font-family: Verdana, Arial, Helvetica, sans-serif; 
color:#FFFFFF;}
 
/* Set hyperlink properties for the body */
a:link {
text-decoration: none;
color:#000099;
}
a:visited {
text-decoration: none;
color:#000099;
}
a:hover {
text-decoration: underline;
color:#000099;
}
a:active {
text-decoration: none;
color:#000099;
}
 
/* Set hyperlink properties for the menu */
a.menu:link {
text-decoration: none;
color:#FFFFFF;
}
a.menu:visited {
text-decoration: none;
color:#FFFFFF;
}
a.menu:hover {
text-decoration: underline;
color:#FFFFFF;
}
a.menu:active {
text-decoration: none;
color:#FFFFFF;
}
 
/* Set font properties */
.header_font
{
font-size: 2.0em;
font-weight: bold;
font-family: Verdana, Arial, Helvetica, sans-serif; 
}
 
.body_header
{
font-size: 1.0em;
font-weight: bold;
font-family: Verdana, Arial, Helvetica, sans-serif; 
}
 
.footer_font
{
font-size: 1.0em;
font-family: Verdana, Arial, Helvetica, sans-serif; 
}
 
</style></head><body>
<br>
<div class='body_header'>BODYID</div><br>
<div class='profile_left'>IMAGE</div>
<div class='profile_right'>
	<b>Institution</b><br><br>
	<span class='header'>Name:</span> <span class='bodytext'>First Middle Last Name</span><br><br>
	<span class='header'>My V-Card:</span>  <span class='bodytext'><a href=vcard.php?class=ID target='_blank'>Add First Middle Last Name to contacts<span></a>    <a href=vcard.php?class=id target='_blank'></a><br>
	<br><span class='header'>Organization:</span> <span class='bodytext'>ORG</span><br>
	<br><span class='header'>University:</span> <span class='bodytext'>UNI</span><br>
	<span class='header'>Department:</span> <span class='bodytext'>DPT</span><br>
	<span class='header'>District Name:</span><span class='bodytext'>DSN</span><br>
	<span class='header'>Chapter ID:</span><span class='bodytext'>CHP</span><br>
	<br><span class='header'>Email:</span><span class='bodytext'> <a href='mailto:mail'>MAIL</span></a><br>
	<span class='header'>Department Phone:</span> <span class='bodytext'>TEL1</span><br>
	<span class='header'>Work Phone:</span> <span class='bodytext'>TEL2</span><br>
	<span class='header'>Work Cell:</span> <span class='bodytext'>TEL3</span><br>
	<span class='header'>Work Fax:</span> <span class='bodytext'>TEL4</span><br>
	<br><span class='header'>Work Address:</span><br>
	<span class='bodytext'>AD1</span><br>
	<span class='bodytext'>AD2</span><br>
	<span class='bodytext'>AD3</span>
	<span class='bodytext'>, </span>
	<span class='bodytext'>AD4</span><br>
	
	<br><span class='header'>Home Address:</span><br>
	<span class='bodytext'>AD1</span><br>
	<span class='bodytext'>AD2</span><br>
	<span class='bodytext'>AD3</span>
	<span class='bodytext'>, </span>
	<span class='bodytext'>AD4</span><br>
	<br><span class='header'>Home Phone:</span> <span class='bodytext'>TEL1</span><br>
	<span class='header'>Home Cell:</span> <span class='bodytext'>TEL2</span><br>
	<br><span class='header'>Teaching Experience:</span><br><span class='bodytext'>TEL3<br>
	<br><span class='header'>First Year:</span><span class='bodytext'> Yes<br>
	<br><span class='header'>Education:</span><br>
	<span class='bodytext'>DEG1<br>
	<span class='bodytext'>DEG2<br>
	<span class='bodytext'>DEG3<br>
	<hr>
</div>
 
<div class='profile_left'>IMAGE</div>
<div class='profile_right'>
	<b>Institution</b><br><br>
	<span class='header'>Name:</span> <span class='bodytext'>First Middle Last Name</span><br><br>
	<span class='header'>My V-Card:</span>  <span class='bodytext'><a href=vcard.php?class=ID target='_blank'>Add First Middle Last Name to contacts<span></a>    <a href=vcard.php?class=id target='_blank'></a><br>
	<br><span class='header'>Organization:</span> <span class='bodytext'>ORG</span><br>
	<br><span class='header'>University:</span> <span class='bodytext'>UNI</span><br>
	<span class='header'>Department:</span> <span class='bodytext'>DPT</span><br>
	<span class='header'>District Name:</span><span class='bodytext'>DSN</span><br>
	<span class='header'>Chapter ID:</span><span class='bodytext'>CHP</span><br>
	<br><span class='header'>Email:</span><span class='bodytext'> <a href='mailto:mail'>MAIL</span></a><br>
	<span class='header'>Department Phone:</span> <span class='bodytext'>TEL1</span><br>
	<span class='header'>Work Phone:</span> <span class='bodytext'>TEL2</span><br>
	<span class='header'>Work Cell:</span> <span class='bodytext'>TEL3</span><br>
	<span class='header'>Work Fax:</span> <span class='bodytext'>TEL4</span><br>
	<br><span class='header'>Work Address:</span><br>
	<span class='bodytext'>AD1</span><br>
	<span class='bodytext'>AD2</span><br>
	<span class='bodytext'>AD3</span>
	<span class='bodytext'>, </span>
	<span class='bodytext'>AD4</span><br>
	
	<br><span class='header'>Home Address:</span><br>
	<span class='bodytext'>AD1</span><br>
	<span class='bodytext'>AD2</span><br>
	<span class='bodytext'>AD3</span>
	<span class='bodytext'>, </span>
	<span class='bodytext'>AD4</span><br>
	<br><span class='header'>Home Phone:</span> <span class='bodytext'>TEL1</span><br>
	<span class='header'>Home Cell:</span> <span class='bodytext'>TEL2</span><br>
	<br><span class='header'>Teaching Experience:</span><br><span class='bodytext'>TEL3<br>
	<br><span class='header'>First Year:</span><span class='bodytext'> Yes<br>
	<br><span class='header'>Education:</span><br>
	<span class='bodytext'>DEG1<br>
	<span class='bodytext'>DEG2<br>
	<span class='bodytext'>DEG3<br>
	<hr>
</div>
 
 
</body></html>

Open in new window

0
absxCommented:
To correct myself, as the example above didn't exactly work in IE, it actually might be a good idea to use a profile_wrapper class to keep the profiles separate. Below another example that seems to work better.
<html>
<head><style>
 
html, body {
	margin: 0px;
	padding: 0px;
	font-size: 1.0em;
	font-family: Verdana, Arial, Helvetica, sans-serif; 
} 
 
.profile_wrapper {
 
	padding-left: 250px;
	overflow: auto;
}
 
.profile_left {
	width: 200px;
	clear: both;
	float: left;
	border: solid 1px #000;
}
 
.profile_right{
	border: solid 1px #000;
	width: 500px;
	overflow: auto;
}
 
.header {
	background:url(images/s2.png);
	margin-left: 0;
}
 
.container {
	border:solid 10px #333366;
}
 
</style></head><body>
<br>
<div class='body_header'>BODYID</div><br>
<div class="profile_wrapper">
	<div class='profile_left'>IMAGE</div>
	<div class='profile_right'>
		<b>Institution</b><br><br>
		<span class='header'>Name:</span> <span class='bodytext'>First Middle Last Name</span><br><br>
		<span class='header'>My V-Card:</span>  <span class='bodytext'><a href=vcard.php?class=ID target='_blank'>Add First Middle Last Name to contacts<span></a>    <a href=vcard.php?class=id target='_blank'></a><br>
		<br><span class='header'>Organization:</span> <span class='bodytext'>ORG</span><br>
		<br><span class='header'>University:</span> <span class='bodytext'>UNI</span><br>
		<span class='header'>Department:</span> <span class='bodytext'>DPT</span><br>
		<span class='header'>District Name:</span><span class='bodytext'>DSN</span><br>
		<span class='header'>Chapter ID:</span><span class='bodytext'>CHP</span><br>
		<br><span class='header'>Email:</span><span class='bodytext'> <a href='mailto:mail'>MAIL</span></a><br>
		<span class='header'>Department Phone:</span> <span class='bodytext'>TEL1</span><br>
		<span class='header'>Work Phone:</span> <span class='bodytext'>TEL2</span><br>
		<span class='header'>Work Cell:</span> <span class='bodytext'>TEL3</span><br>
		<span class='header'>Work Fax:</span> <span class='bodytext'>TEL4</span><br>
		<br><span class='header'>Work Address:</span><br>
		<span class='bodytext'>AD1</span><br>
		<span class='bodytext'>AD2</span><br>
		<span class='bodytext'>AD3</span>
		<span class='bodytext'>, </span>
		<span class='bodytext'>AD4</span><br>
		
		<br><span class='header'>Home Address:</span><br>
		<span class='bodytext'>AD1</span><br>
		<span class='bodytext'>AD2</span><br>
		<span class='bodytext'>AD3</span>
		<span class='bodytext'>, </span>
		<span class='bodytext'>AD4</span><br>
		<br><span class='header'>Home Phone:</span> <span class='bodytext'>TEL1</span><br>
		<span class='header'>Home Cell:</span> <span class='bodytext'>TEL2</span><br>
		<br><span class='header'>Teaching Experience:</span><br><span class='bodytext'>TEL3<br>
		<br><span class='header'>First Year:</span><span class='bodytext'> Yes<br>
		<br><span class='header'>Education:</span><br>
		<span class='bodytext'>DEG1<br>
		<span class='bodytext'>DEG2<br>
		<span class='bodytext'>DEG3<br>
		<hr>
	</div>
</div>
<div class="profile_wrapper">
	<div class='profile_left'>IMAGE</div>
	<div class='profile_right'>
		<b>Institution</b><br><br>
		<span class='header'>Name:</span> <span class='bodytext'>First Middle Last Name</span><br><br>
		<span class='header'>My V-Card:</span>  <span class='bodytext'><a href=vcard.php?class=ID target='_blank'>Add First Middle Last Name to contacts<span></a>    <a href=vcard.php?class=id target='_blank'></a><br>
		<br><span class='header'>Organization:</span> <span class='bodytext'>ORG</span><br>
		<br><span class='header'>University:</span> <span class='bodytext'>UNI</span><br>
		<span class='header'>Department:</span> <span class='bodytext'>DPT</span><br>
		<span class='header'>District Name:</span><span class='bodytext'>DSN</span><br>
		<span class='header'>Chapter ID:</span><span class='bodytext'>CHP</span><br>
		<br><span class='header'>Email:</span><span class='bodytext'> <a href='mailto:mail'>MAIL</span></a><br>
		<span class='header'>Department Phone:</span> <span class='bodytext'>TEL1</span><br>
		<span class='header'>Work Phone:</span> <span class='bodytext'>TEL2</span><br>
		<span class='header'>Work Cell:</span> <span class='bodytext'>TEL3</span><br>
		<span class='header'>Work Fax:</span> <span class='bodytext'>TEL4</span><br>
		<br><span class='header'>Work Address:</span><br>
		<span class='bodytext'>AD1</span><br>
		<span class='bodytext'>AD2</span><br>
		<span class='bodytext'>AD3</span>
		<span class='bodytext'>, </span>
		<span class='bodytext'>AD4</span><br>
		
		<br><span class='header'>Home Address:</span><br>
		<span class='bodytext'>AD1</span><br>
		<span class='bodytext'>AD2</span><br>
		<span class='bodytext'>AD3</span>
		<span class='bodytext'>, </span>
		<span class='bodytext'>AD4</span><br>
		<br><span class='header'>Home Phone:</span> <span class='bodytext'>TEL1</span><br>
		<span class='header'>Home Cell:</span> <span class='bodytext'>TEL2</span><br>
		<br><span class='header'>Teaching Experience:</span><br><span class='bodytext'>TEL3<br>
		<br><span class='header'>First Year:</span><span class='bodytext'> Yes<br>
		<br><span class='header'>Education:</span><br>
		<span class='bodytext'>DEG1<br>
		<span class='bodytext'>DEG2<br>
		<span class='bodytext'>DEG3<br>
		<hr>
	</div>
</div>
</body></html>

Open in new window

0
CompTIA Network+

Prepare for the CompTIA Network+ exam by learning how to troubleshoot, configure, and manage both wired and wireless networks.

profyaCommented:
In stead of using margin use padding, padding-left: ......... since DIV objects better positioned using the padding property.
0
profyaCommented:
I have create a sample table containing the 34 field. The problem is not with the css, you need to alternate the div style among loop iterations.
I have created a variable named $alternate, in odd loop iterations it uses profile_left and profile_right in even iterations.
replace lines from 21 to 30 with the code attached.
$alternate="";
while($queryArray = mysql_fetch_array( $query ))
{
	if($alternate=="id='profile_right'")
		$alternate="id='profile_left'";
	else
		$alternate="id='profile_right'";
echo $count, $alternate, "<br>";
print "<div id='body_font'><div id='profile_wrapper'><div $alternate><p align='left'><img src= ../agteacher/uploaded_pics/" . $queryArray['file_name'] . " width='180'></p>" ;
 
echo "</div><div $alternate>";

Open in new window

0
jbpeakeAuthor Commented:
There are several responses to this question, but I think that profya is correct about alternating the div through each loop iteration.  I tried implementing Profya's recommendation, but it still writes the returned values over top of each other.  Any suggestions on the code below?
<?PHP
 
include'start.php';
 
$_GET["sorter"];
$sorter = $_GET["sorter"];
 
$_GET["id"];
$id = $_GET["id"];
 
if (($sorter=="") || ($id=="")){
echo "<meta http-equiv='Refresh' content='0;URL=directory.php>";
}
 
echo "<br><div id='body_header'>" . $id . "</div><br>" ;
 
$query = mysql_query("SELECT * FROM users WHERE institution = '".$id."' ORDER BY rank DESC, last_name ASC") 
or die(mysql_error()); 
 
 
	
$alternate="";
while($queryArray = mysql_fetch_array( $query ))
{
	if($alternate=="id='profile_right'")
		$alternate="id='profile_left'";
	else
		$alternate="id='profile_right'";
echo $count, $alternate, "<br>";
print "<div id='body_font'><div id='profile_wrapper'><div $alternate><p align='left'><img src= ../agteacher/uploaded_pics/" . $queryArray['file_name'] . " width='180'></p>" ;
 
echo "</div><div $alternate>";
 
 
print "<p>" ;
if ($queryArray['institution']!=="") {
print "<b>" . $queryArray['institution'] . "</b><br><br>" ;
}
if ($queryArray['first_name']!=="") {
print "<span class='header'>Name:</span> <span class='bodytext'>" ;
print $queryArray['first_name'] ;
if ($queryArray['middle_name']!==""){
print " " . $queryArray['middle_name'] ;
}
print " " . $queryArray['last_name'] . "</span><br><br>" ;
}
print "<span class='header'>My V-Card:</span>&nbsp;&nbsp;<span class='bodytext'><a href=vcard.php?id=" . $id . " target='_blank'>Add " . $queryArray['first_name'] . " " . $queryArray['middle_name'] . " " . $queryArray['last_name'] . " to contacts<span></a>  &nbsp; <a href=vcard.php?id=" . $id . " target='_blank'><img border='0' src=vcard.gif width='25'></a><br>";
if ($queryArray['organization']!=="") {
print "<br><span class='header'>Organization:</span> <span class='bodytext'>" .  $queryArray['organization'] . "</span><br>" ;
}
if ($queryArray['university']!=="") {
print "<br><span class='header'>University:</span> <span class='bodytext'>" .  $queryArray['university'] . "</span><br>" ;
}
if ($queryArray['department']!=="") {
print "<span class='header'>Department:</span> <span class='bodytext'>" .  $queryArray['department'] . "</span><br>" ;
}
if ($queryArray['district_name']!=="") {
print "<span class='header'>District Name:</span><span class='bodytext'>" . $queryArray['district_name'] . "</span><br>" ;
}
if ($queryArray['chapter_id']!=="") {
print "<span class='header'>Chapter ID:</span><span class='bodytext'>" . $queryArray['chapter_id'] . "</span><br>" ;
}
if ($queryArray['email']!=="") {
print "<br><span class='header'>Email:</span><span class='bodytext'> <a href='mailto:" .  $queryArray['email'] . "'>" . $queryArray['email'] . "</span></a><br>" ;
}
if ($queryArray['dept_phone']!=="") {
print "<span class='header'>Department Phone:</span> <span class='bodytext'>" . $queryArray['dept_phone'] . " " . $queryArray['dept_phone_ext'] . "</span><br>" ;
}
if ($queryArray['work_phone']!=="") {
print "<span class='header'>Work Phone:</span> <span class='bodytext'>" . $queryArray['work_phone'] . "</span><br>" ;
}
if ($queryArray['work_cell']!=="") {
print "<span class='header'>Work Cell:</span> <span class='bodytext'>" . $queryArray['work_cell'] . "</span><br>" ;
}
if ($queryArray['work_fax']!=="") {
print "<span class='header'>Work Fax:</span> <span class='bodytext'>" . $queryArray['work_fax'] . "</span><br>" ;
}
if ($queryArray['work_address_1']!=="" || $queryArray['work_address_2']!=="" || $queryArray['work_city']!=="" || $queryArray['work_state']!=="") {
print "<br><span class='header'>Work Address:</span><br>";
}
if ($queryArray['work_address_1']!=="") {
print "<span class='bodytext'>" . $queryArray['work_address_1'] . "</span><br>" ;
}
if ($queryArray['work_address_2']!=="") {
print "<span class='bodytext'>" . $queryArray['work_address_2'] . "</span><br>" ;
}
if ($queryArray['work_city']!=="") {
print  "<span class='bodytext'>" . $queryArray['work_city'] . "</span>";
}
if ($queryArray['work_city']!==""){
print  "<span class='bodytext'>" . ", </span>";
}
if ($queryArray['work_state']!=="") {
print  "<span class='bodytext'>" . $queryArray['work_state'] . "  " . $queryArray['work_zip']. "</span><br>" ;
}
 
if(isset($_SESSION['username'])) {
 
if ($queryArray['home_address_1']!=="" || $queryArray['home_address_2']!=="" || $queryArray['home_city']!=="" || $queryArray['home_state']!=="") {
print "<br><span class='header'>Home Address:</span><br>";
}
if ($queryArray['home_address_1']!=="") {
print "<span class='bodytext'>" . $queryArray['home_address_1'] . "</span><br>" ;
}
if ($queryArray['home_address_2']!=="") {
print "<span class='bodytext'>" . $queryArray['home_address_2'] . "</span><br>" ;
}
if ($queryArray['home_city']!=="") {
print  "<span class='bodytext'>" . $queryArray['home_city'] . "</span>";
}
if ($queryArray['home_city']!==""){
print  "<span class='bodytext'>" . ", </span>";
}
if ($queryArray['home_state']!=="") {
print  "<span class='bodytext'>" . $queryArray['home_state'] . "  " . $queryArray['home_zip']. "</span><br>" ;
}
if ($queryArray['home_phone']!=="") {
print "<br><span class='header'>Home Phone:</span> <span class='bodytext'>" . $queryArray['home_phone'] . "</span><br>" ;
}
if ($queryArray['home_cell']!=="") {
print "<span class='header'>Home Cell:</span> <span class='bodytext'>" . $queryArray['home_cell'] . "</span><br>" ;
}
 
}
 
if ($queryArray['teaching_exp']!=="") {
print "<br><span class='header'>Teaching Experience:</span><br><span class='bodytext'> " . $queryArray['teaching_exp'] . "<br>" ;
}
if ($queryArray['first_year']=="Yes") {
print "<br><span class='header'>First Year:</span><span class='bodytext'> Yes<br>" ;
}
if ($queryArray['degree_1']!=="" || $queryArray['degree_2']!=="" || $queryArray['degree_3']!=="" ) {
print "<br><span class='header'>Education:</span><br>";
}
if ($queryArray['degree_1']!=="") {
print "<span class='bodytext'>" . $queryArray['degree_1'] . "<br>" ;
}
if ($queryArray['degree_2']!=="") {
print "<span class='bodytext'> " . $queryArray['degree_2'] . "<br>" ;
}
if ($queryArray['degree_3']!=="") {
print "<span class='bodytext'>" . $queryArray['degree_3'] . "<br>" ;
}
echo "<hr></div></div><br>";
}
 
include 'end.php';
?>

Open in new window

0
IanThCommented:
are you using a repeatable region
0
profyaCommented:
I have simulated your code and tried it my self. If there is a problem you should check your css and make sure that profile_left and profile_right have different posistions actually left, for example profile_left:
left: 150px;
profile_right:
left: 350px;

Then you can adjust them to suit your layout.
0
jbpeakeAuthor Commented:
I'm sorry guys, I have failed to communicate the problem well.  The page is posted at:

http://www.jpeake.com/agteacher2/institution.php?sorter=institution&id=Williston+High+School

Currently the divs look like:

#profile_left
{
      width: 200px;
      clear: both;
      float: left: 150px;
      border: solid 1px #000;
}

#profile_right
{
      width: 500px;
      overflow: auto;      
      float: left: 150px;
      border: solid 1px #000;
}

You can see, the two records that are returned are written directly over top of each other... I'm still playing with it trying to make them display in order from top to bottom.

J
0
profyaCommented:
profile_left and profile_right both uses  float: left: 150px;
Change that for profile_right for example to  left: 150px;
You can change it to the following to see the difference:



#profile_left
{
position: absolute; left: 10px;
}
 
#profile_right
{
	position: absolute; left: 350px;
}

Open in new window

0
jbpeakeAuthor Commented:
I'm still struggling...

Now the css looks like:


#profile_left
{
      width: 200px;
      clear: both;
      float: left: 150px;
      border: solid 1px #000;
}

#profile_right
{
      width: 500px;
      overflow: auto;      
      position: absolute; left: 350px;
      border: solid 1px #000;
}

It is posted at:

http://www.jpeake.com/agteacher2/institution.php?sorter=institution&id=Williston+High+School

0
profyaCommented:
Ok, I have prepared the whole code. It is attached, please check it and use the following style:
#profile_left
{
      width:450px;
      float:left;
      padding-left:10px;
      margin-left:10px;
      background-color:#FFFFCC;
}

#profile_right
{
      width:450px;
      background-color:#DFF4FF;
      float:right;
      padding-right:10px;
      margin-right:10px;
}


I removed the wrapper and used divs directly, you can see the screen capture attached, is something like this helps you?
<?php
include'start.php';
 
$_GET["sorter"];
$sorter = $_GET["sorter"];
 
$_GET["id"];
$id = $_GET["id"];
 
if (($sorter=="") || ($id=="")){
echo "<meta http-equiv='Refresh' content='0;URL=directory.php>";
}
$query = mysql_query("SELECT * FROM users WHERE institution = '".$id."' ORDER BY rank DESC, last_name ASC")
or die(mysql_error());
$alternate="";
while($queryArray = mysql_fetch_array( $query ))
{
	if($alternate=="id='profile_right'")
		$alternate="id='profile_left'";
	else
		$alternate="id='profile_right'";
print "<div $alternate><p align='left'><img src= ../agteacher/uploaded_pics/" . $queryArray['file_name'] . " width='180'></p>" ;
print "<p>" ;
if ($queryArray['institution']!=="") {
print "<b>" . $queryArray['institution'] . "</b><br><br>" ;
}
if ($queryArray['first_name']!=="") {
print "<span class='header'>Name:</span> <span class='bodytext'>" ;
print $queryArray['first_name'] ;
if ($queryArray['middle_name']!==""){
print " " . $queryArray['middle_name'] ;
}
print " " . $queryArray['last_name'] . "</span><br><br>" ;
}
print "<span class='header'>My V-Card:</span>&nbsp;&nbsp;<span class='bodytext'><a href=vcard.php?id=" . $id . " target='_blank'>Add " . $queryArray['first_name'] . " " . $queryArray['middle_name'] . " " . $queryArray['last_name'] . " to contacts<span></a>  &nbsp; <a href=vcard.php?id=" . $id . " target='_blank'><img border='0' src=vcard.gif width='25'></a><br>";
if ($queryArray['organization']!=="") {
print "<br><span class='header'>Organization:</span> <span class='bodytext'>" .  $queryArray['organization'] . "</span><br>" ;
}
if ($queryArray['university']!=="") {
print "<br><span class='header'>University:</span> <span class='bodytext'>" .  $queryArray['university'] . "</span><br>" ;
}
if ($queryArray['department']!=="") {
print "<span class='header'>Department:</span> <span class='bodytext'>" .  $queryArray['department'] . "</span><br>" ;
}
if ($queryArray['district_name']!=="") {
print "<span class='header'>District Name:</span><span class='bodytext'>" . $queryArray['district_name'] . "</span><br>" ;
}
if ($queryArray['chapter_id']!=="") {
print "<span class='header'>Chapter ID:</span><span class='bodytext'>" . $queryArray['chapter_id'] . "</span><br>" ;
}
if ($queryArray['email']!=="") {
print "<br><span class='header'>Email:</span><span class='bodytext'> <a href='mailto:" .  $queryArray['email'] . "'>" . $queryArray['email'] . "</span></a><br>" ;
}
if ($queryArray['dept_phone']!=="") {
print "<span class='header'>Department Phone:</span> <span class='bodytext'>" . $queryArray['dept_phone'] . " " . $queryArray['dept_phone_ext'] . "</span><br>" ;
}
if ($queryArray['work_phone']!=="") {
print "<span class='header'>Work Phone:</span> <span class='bodytext'>" . $queryArray['work_phone'] . "</span><br>" ;
}
if ($queryArray['work_cell']!=="") {
print "<span class='header'>Work Cell:</span> <span class='bodytext'>" . $queryArray['work_cell'] . "</span><br>" ;
}
if ($queryArray['work_fax']!=="") {
print "<span class='header'>Work Fax:</span> <span class='bodytext'>" . $queryArray['work_fax'] . "</span><br>" ;
}
if ($queryArray['work_address_1']!=="" || $queryArray['work_address_2']!=="" || $queryArray['work_city']!=="" || $queryArray['work_state']!=="") {
print "<br><span class='header'>Work Address:</span><br>";
}
if ($queryArray['work_address_1']!=="") {
print "<span class='bodytext'>" . $queryArray['work_address_1'] . "</span><br>" ;
}
if ($queryArray['work_address_2']!=="") {
print "<span class='bodytext'>" . $queryArray['work_address_2'] . "</span><br>" ;
}
if ($queryArray['work_city']!=="") {
print  "<span class='bodytext'>" . $queryArray['work_city'] . "</span>";
}
if ($queryArray['work_city']!==""){
print  "<span class='bodytext'>" . ", </span>";
}
if ($queryArray['work_state']!=="") {
print  "<span class='bodytext'>" . $queryArray['work_state'] . "  " . $queryArray['work_zip']. "</span><br>" ;
}
 
if(isset($_SESSION['username'])) {
 
if ($queryArray['home_address_1']!=="" || $queryArray['home_address_2']!=="" || $queryArray['home_city']!=="" || $queryArray['home_state']!=="") {
print "<br><span class='header'>Home Address:</span><br>";
}
if ($queryArray['home_address_1']!=="") {
print "<span class='bodytext'>" . $queryArray['home_address_1'] . "</span><br>" ;
}
if ($queryArray['home_address_2']!=="") {
print "<span class='bodytext'>" . $queryArray['home_address_2'] . "</span><br>" ;
}
if ($queryArray['home_city']!=="") {
print  "<span class='bodytext'>" . $queryArray['home_city'] . "</span>";
}
if ($queryArray['home_city']!==""){
print  "<span class='bodytext'>" . ", </span>";
}
if ($queryArray['home_state']!=="") {
print  "<span class='bodytext'>" . $queryArray['home_state'] . "  " . $queryArray['home_zip']. "</span><br>" ;
}
if ($queryArray['home_phone']!=="") {
print "<br><span class='header'>Home Phone:</span> <span class='bodytext'>" . $queryArray['home_phone'] . "</span><br>" ;
}
if ($queryArray['home_cell']!=="") {
print "<span class='header'>Home Cell:</span> <span class='bodytext'>" . $queryArray['home_cell'] . "</span><br>" ;
}
 
}
 
if ($queryArray['teaching_exp']!=="") {
print "<br><span class='header'>Teaching Experience:</span><br><span class='bodytext'> " . $queryArray['teaching_exp'] . "<br>" ;
}
if ($queryArray['first_year']=="Yes") {
print "<br><span class='header'>First Year:</span><span class='bodytext'> Yes<br>" ;
}
if ($queryArray['degree_1']!=="" || $queryArray['degree_2']!=="" || $queryArray['degree_3']!=="" ) {
print "<br><span class='header'>Education:</span><br>";
}
if ($queryArray['degree_1']!=="") {
print "<span class='bodytext'>" . $queryArray['degree_1'] . "<br>" ;
}
if ($queryArray['degree_2']!=="") {
print "<span class='bodytext'> " . $queryArray['degree_2'] . "<br>" ;
}
if ($queryArray['degree_3']!=="") {
print "<span class='bodytext'>" . $queryArray['degree_3'] . "<br>" ;
}
echo "<hr></div><br>";
}
 
include 'end.php';
?>

Open in new window

cap3.PNG
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
jbpeakeAuthor Commented:
profya,

Thank you for your patience and help... I realized after your guidance that I was making a stupid mistake with my <div id='col2'> that was making everything move to the left.  A very stupid mistake, but since you gave me good working examples it made it easier for me to find the problem.

Thanks again,
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
PHP

From novice to tech pro — start learning today.