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?
 
profyaConnect With a Mentor Commented:
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
 
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
Hire Technology Freelancers with Gigs

Work with freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely, and get projects done right.

 
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
 
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
 
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
All Courses

From novice to tech pro — start learning today.