displaying members with CalGuys User Directory

[fiddler]

I have been working on a list of members for an organization and can nearly see daylight on making it all work, but am still having some problems.

While now I have the members displayed the way they need to, for some reason the list "blows past" my template and gets distorted.

You can see what I mean on this test website:
http://partslister.com/index.php?page=members
I have NO idea why the list first "drops down" below the content are of the template, then seems to ignore the template altogether until it shows the footer section at the very end of the page....but the footer is no longer "inside" the template itself.

I'm not sure if this problem has something to do with the CG User Directory Summary Template, the page template, or if there is some kind of limitation on how much content a page can display - although the entire list of members IS split up into 4 separate pages.

Another problem is - when calling up the members by category on this page:
http://partslister.com/index.php?page=m ... y-category
the categories are not in a-b-c order, but when a category is picked, the members are displayed in a-b-c order, which is good!
The list of categories IS in a-b-c order in the FEU Management section for properties, so I do not understand why the categories themselves come up in the order they do.

I am using the following:
CMS Version 1.11.7
CGExtensions 1.37.2
FrontEndUsers 1.21.2
SelfRegistration 1.7.4
CGUserDirectory 1.3
Operating System linux
Apache version 2.2.24
PHP version 5.2.17
MySQL version 5.5.30-30.2

The code for the summary template is this:
{* CGUserDirectory summary template *}
<div id='userdirectory_summary'>
{if isset($numpages) && $numpages > 1}
{if isset($firstpage_url)}
<a href="{$firstpage_url}" title="{$mod->Lang('lbl_first_page')}"><<</a>
{/if}
{if isset($prevpage_url)}
<a href="{$prevpage_url}" title="{$mod->Lang('libl_prev_page')}"><</a>
{/if}
&nbsp;{$mod->Lang('page')}&nbsp;{$curpage}&nbsp;{$mod->Lang('of')}&nbsp;{$numpages}&nbsp;
{if isset($nextpage_url)}
<a href="{$nextpage_url}" title="{$mod->Lang('lbl_next_page')}">></a>
{/if}
{if isset($lastpage_url)}
<a href="{$lastpage_url}" title="{$mod->Lang('lbl_last_page')}">>></a>
{/if}
{/if}
{CGUserDirectory action='directory' prop='name'}
<br>

{foreach from=$users item='oneuser'}
{if isset($oneuser.properties.icon)}
<div style='float: left; display: block;width: 250px;height: 275px;margin: 5px;'>

<div class='row' style='margin: 0.5em;'>
<div class='userdirectory_category'>
</div></div>
<div class='row' style='margin: 0.5em;'>
{if isset($oneuser.properties.website)}
<strong><a href='http://www.{$oneuser.properties.website}' target='_blank'>{$oneuser.properties.name}</a></strong>
{else}
<strong>{$oneuser.properties.name}</strong>
{/if}
</div>


<div class='row' style='margin: 0.5em;'>
{$oneuser.properties.address}
</div>

<div class='row' style='margin: 0.5em;'>
{$oneuser.properties.city} {$oneuser.properties.state} {$oneuser.properties.zip}
</div>

<div class='row' style='margin: 0.5em;'>
{if isset($oneuser.properties.email)}
<a href='mailto:{$oneuser.properties.email}' target='_blank'>{$oneuser.properties.contact_person}</a>
{else}
{$oneuser.properties.contact_person}
{/if}
</div>
</div>

<br/><br/>
<div style='float: right; display: block;width: 450px;height: 275px;margin: 5px;'>
{if isset($oneuser.properties.icon)}
<div class='row'>
<img width='75' height='75' src='http://partslister.com/uploads/feusers/ ... rties.icon}' alt=''>

</div>
{/if}
{if isset($oneuser.properties.description)}
<div class='row' style='margin: 0.5em; padding-top: 1.5em;'>
{$oneuser.properties.description}

</div>
{/if}
</div>
{else}
<div style='float: left; display: block;width: 275px;height: 235px;margin: 5px;'>
<div class='row' style='margin: 0.5em; padding-bottom: 0;'>
</div>

<div class='row' style='margin: 0.5em;'>
{if isset($oneuser.properties.website)}
<strong><a href='http://www.{$oneuser.properties.website}' target='_blank'>{$oneuser.properties.name}</a></strong>
{else}
<strong>{$oneuser.properties.name}</strong>
{/if}
</div>


<div class='row' style='margin: 0.5em;'>
{$oneuser.properties.address}
</div>
<div class='row' style='margin: 0.5em;'>
{$oneuser.properties.city} {$oneuser.properties.state} {$oneuser.properties.zip}
</div>
<div class='row' style='margin: 0.5em;'>
{$oneuser.properties.phone}
</div>

{if isset($oneuser.properties.email)}
<div class='row' style='margin: 0.5em; font-color: #ff0000;'>
<a href='mailto:{$oneuser.properties.email}' target='_blank'>{$oneuser.properties.contact_person}</a>
{else}
{$oneuser.properties.contact_person}
{/if}
</div>

</div>
<br/><br/>
<div style='float: left; display: block;width: 450px;height: 235px;margin: 5px;'>
{if isset($oneuser.properties.icon)}
<div class='row' style='margin: 0.5em; padding-bottom: .5em;'>
<img height='75px' src='http://partslister.com/uploads/feusers/ ... rties.icon}' alt=''>

</div>
{/if}
{if isset($oneuser.properties.description)}
<div class='row' style='margin: 0.5em; padding-top: .5em;'>
{$oneuser.properties.description}

</div>
{/if}
</div>
{/if}

<br/><br/>


{/foreach}

</div>

------
The page template code is:
{process_pagedata}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<__html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>{sitename} - {title}</title>
{metadata}
{cms_stylesheet}
<meta name="keywords" content="Welllsboro, PA, Pennsylvania Grand Canyon, vacation, small town charm, Tioga County" />
<meta name="description" content="home of gas lit streets and the Pennsylvania Grand Canyon" />
<link href="default.css" rel="stylesheet" type="text/css" />
<link href="/favicon.ico" rel="shortcut icon" type="image/vnd.microsoft.icon" />
<link href='http://fonts.googleapis.com/css?family=Domine:400,700' rel='stylesheet' type='text/css'>
</head>
</__body>
<div id="wrapper">
<div id="header">
<h1><a href="#"><img src="images/logo2.png" border=0 alt="Wellsboro Area Chamber of Commerce"></a></h1>
</div>

<div id="left">
<div id="menu" class="boxed2">
<h2 class="heading">Welcome!</h2>
<ul>{menu}
</ul>
</div>
<div id="menu" class="boxed3">
<h2 class="heading">Weather</h2>
<!-- weather -->
<div style="background-color: #ccc">

<__script__ type="text/javascript" src="http://netweather.accuweather.com/adcbi ... "></__script>
</div>
<div style="text-align: center; font-family: arial, helvetica, verdana, sans-serif; font-size: 10px; line-height: 12px;" >
<a href="http://www.accuweather.com/us/PA/WELLSB ... traveler=0" target="_blank">Weather Forecast</a> | <a href="http://www.accuweather.com/maps-satellite.asp" target="_blank">Weather Maps</a>
</div>
</div>
</div>
<!-- end #left -->


<div id="center3"><div class="shadow2">
<div class="boxed2">
<h2 class="heading">{title}</h2>
<div id="content">
{content}
</div>
</div>

<!-- end #center -->
<div style="clear: both;">&nbsp;</div>
<div id="footer">
<p>{global_content name='footer'}</p>
</div></div>
<__body>
</__html>

--------
My main stylesheet code is:
* {
margin: 0;
padding: 0;
}

body {
background: #FFF549 url(/images/autumnbg2.jpg);
background-attachment: fixed;
font-family: Arial, Helvetica, sans-serif;
font-size: 15px;
color: #041E04;
}

h1, h3, h4 {
font-family: 'Domine', serif;
color: #003300;
}

h2 {
font-family: 'Domine', serif;
color: #FFFFFF;
}

p, blockquote, ul, ol {
line-height: 180%;
margin-bottom: 1em;
padding-left: 5px;
text-align: left;
}

a {
color: #000000;
}

a:hover {
text-decoration: none;
}

.boxed1 {
padding: 10px 10px 20px 20px;
background: url(/images/img3a.jpg) repeat-x;
}

.boxed2 {
padding: 20px 0px 20px 15px;
background: url(/images/img4a.jpg) repeat-x;
}

.boxed3 {
padding: 20px 0px 20px 20px;
background: #ccc url(/images/img4a.jpg) repeat-x;
}


.boxed4 {
margin: 20px 0;
padding: 20px 0px 20px 20px;
background: url(/images/img4a.jpg) repeat-x;
}

.heading {
margin-bottom: 40px;
text-transform: normal;
letter-spacing: 3px;
font-size: 16px;
}

#wrapper {
width: 1050px;
margin: 0 auto;

background: url(/images/leftbg.jpg) repeat;
border: 1px solid #003300;
}

/* Header */

#header {
width: 1050px;
height: 180px;
background: url(/images/img1d.jpg) repeat-x;
margin: 0 auto;
text-align: center;
}

#header a {
text-decoration: none;
text-transform: uppercase;
color: #000000;
}

#header h1 {
padding-top: 10px;
letter-spacing: 4px;
font-size: 36px;
}

#header h2 {
letter-spacing: 4px;
font-size: 16px;
}

.gaslight {
width: 980px;
z-index: -1;
margin-top: -130px;
margin-left: -425px;
}

/* Slideshow */

#slideshow {
width: 100%;
height: 350px;
margin: 0 auto;
background: url(/images/leftbg.jpg) repeat;
text-align: center;
}


/* Columns */

#left {
float: left;
width: 220px;
margin-right: 10px;
}

#right {
float: right;
width: 230px;
margin-right: 0px;
padding-right: 0px;
}

#right-inside {
float: right;
width: 220px;
margin-right: 0px;
padding-right: 20px;
}

#left ul, #left ol, #right ul, #right ol {
list-style-position: inside;
}

#menu{
}

#left li {
/* margin-bottom: 1em; */
}

#right li {
margin-bottom: 1.5em;
}

#center {
margin: 0px 250px 0 230px;
padding: 0px 0px 20px 0px;
height: 100%;
background: #FFF;
}

#center2 {
margin: 0px 250px -17px 230px;
padding: 0px 0px 0px 0px;
background: #FFF url(/images/page-top.png) no-repeat;
}

#center3 {
margin: 0px 20px -17px 230px;
padding: 0px 0px 0px 0px;
background: #FFF url(/images/page-top.png) no-repeat;
}

#center5 {
margin: 0px auto;
padding: 0px 0px 20px 0px;
height: 100%;
background: #FFF;
}

.shadow {
-moz-box-shadow: 3px 3px 5px 6px #ccc;
-webkit-box-shadow: 3px 3px 5px 6px #ccc;
box-shadow: 3px 3px 5px 6px #ccc;
}

.shadow2 {
-moz-box-shadow: inset 0 0 5px 0px #888;
-webkit-box-shadow: inset 0 0 0px 5px#888;
box-shadow: inset 0 0 5px 0px #888;
}

#center ul, #center ol {
margin-left: 3em;
}

#content {
margin: 0 20px 0 0;
}

#content2 {
background: #FFF url(/images/page-middle.png) repeat-y;
margin: 0 20px 0 15px;
}

#weather2 {
background: #72B17B;
}

.userdirectory_directoryletter {
font-family: 'Geogia', 'Times New Roman', serif;
color: #D54604;
font-weight: bold;
font-size: 1.2em;
left-padding: 0px;
letter-spacing: -2px;
margin-left: 10px;
}

.userdirectory_directoryletter a:link {
color: #D54604;
}

.userdirectory_category {
font-family: 'Geogia', 'Times New Roman', serif;
color: #D54604;
font-weight: bold;
font-size: 1.5em;
margin: 0.5em;
padding-bottom: .25em;
}

/* Footer */

#footer {
background: url(/images/img4.jpg) repeat-x;
width: 100%;
height: 39px;
text-align: center;
margin: 0px 0 0 0;
padding: 8px 0 0px 0;
line-height: normal;
font-size: 87%;
font: Arial, sans-serif;
color: #000000;
}

Is there any other info I can provide to get some help here? I am absolutely willing to pay for someone's time to help me fix these problems! Just appreciate any info anyone can provide.

[fiddler]

After exhaustive troubleshooting, I've narrowed the problem down to the summary template.

The default summary template is not a desirable option at all, but when that is set to display, the membership info is contained within the page as it should be...mostly - sometimes the info is reversed - with info that should be on the left suddenly displaying on the right, and vice versa. This is the default template - and nothing was changed it that - at all, so it is puzzling to me why the info switches around here and there, then back again.

I've tried designing the template using tables, which will lay out the info perfectly, but the problem then arises that there is - for some reason - a tremendous gap of white space viewers need to scroll down through before the actual table info comes into view. In fact, the gap is so long that the membership content is not even visible until the entire screen is scrolled up. That's also not acceptable. If someone can tell me how to get rid of the gaping white space that results at the top with a table, my problem will be solved.

If someone can tell me how to set up the template otherwise so that the info displays like I want it, using only divs, no tables or cells, that would be fine with me, as well.

Here is my template using a table - with everything layed out like it should be - except for the great gap at the top before the table info is displayed.
{* CGUserDirectory summary template *}

<div id='userdirectory_summary'>
{CGUserDirectory action='directory' prop='name'}
<table width='100%' cellspacing='10' cellpadding='10' border='0' valign='top'>
<tbody>
{foreach from=$users item='oneuser'}
<tr><td>
<div class='row' style='margin: 0.5em; padding-bottom;'>
<div style='float: left;'>{$oneuser.properties.category}</div>
</div><br/>
<div class='row' style='margin: 0.5em;'>
{if isset($oneuser.properties.website)}
<div style='float: left;'><strong><a href='http://www.{$oneuser.properties.website}' target='_blank'>{$oneuser.properties.name}</a></strong></div>
{else}
<div style='float: left;'><strong>{$oneuser.properties.name}</strong></div>
{/if}
</div><br/>
<div class='row' style='margin: 0.5em;'>
<div style='float: left;' >{$oneuser.properties.address}</div>
</div><br/>
<div class='row' style='margin: 0.5em;'>
<div style='float: left;'>{$oneuser.properties.city} {$oneuser.properties.state} {$oneuser.properties.zip}</div>
</div><br/>
{if isset($oneuser.properties.contact_person)}
<div class='row' style='margin: 0.5em;'>
<div style='float: left;' >{$oneuser.properties.contact_person}</div>
</div><br/>
{/if}
{if isset($oneuser.properties.email)}
<div class='row' style='margin: 0.5em;'>
<div style='float: left;'>{$oneuser.properties.email}</div>
</div><br/>
{/if}
<br/><br/>
</td>
<td>
{if isset($oneuser.properties.icon)}
<div class='row'>
<img width='75' height='75' src='http://partslister.com/uploads/feusers/ ... rties.icon}' alt=''><br/><br/>

</div>
{/if}
{if isset($oneuser.properties.description)}
<div class='row'>
<div style='float: left;' >{$oneuser.properties.description}<br/></div><br/>

</div>
{/if}
</td>
</tr>

<br/><br/>
</div>

{/foreach}
</tbody>
</table>
</div>

Thank you for anyone that can provide insight to this problem.