I got it to work
Here is the code form the page
<h1>Fort Lauderdale Staff</h1>
[simple-staff-list group="fort-lauderdale"]
<h1>France Staff</h1>
[simple-staff-list group="france"]
<h1>St. Thomas Staff</h1>
[simple-staff-list group="st-thomas"]
Staff loop Template
[staff_loop]
<img class="staff-member-photo" src="[staff-photo-url]" alt="[staff-name] : [staff-position]">
<div class="staff-member-info-wrap">
[staff-name-formatted]
</div>
[/staff_loop]
Staff page CSS (thanks to someone else, not sure who)
div.main_inner {
display: table;
}
div.staff-member {
float:left;/*fix for buggy browsers*/
display:table-column;
width:185px;
height:250px;
text-align: center;
vertical-align: middle;
}
I did have to play with the width for the desired outcome.
Hope this helps you out. Good luck
Just so your aware, and it will depend on your page settings I had to add breaks to get the spacing correct. it took some playing however here is what I ended up with.
<div><h1>Fort Lauderdale Staff</h1></div>
[simple-staff-list group="fort-lauderdale"]
<br></br>
<br></br>
<br></br>
<br></br>
<br></br>
<br></br>
<br></br>
<br></br>
<br></br>
<br></br>
<br></br>
<br></br>
<br></br>
<div><h1>France Staff</h1></div>
[simple-staff-list group="france"]
<br></br>
<br></br>
<br></br>
<br></br>
<div><h1>St. Thomas Staff</h1></div>
[simple-staff-list group="st-thomas"]
