Hi, I'm not a massive CSS whizz but over the past couple of weeks I have been getting better. I am in the process of skinning a wordpress theme.

I need a page which shows staff members with their photo on the left and some information on them on the right. Now, I can get this to work for the first staff member listed on the page.

This is the CSS in the .css file

/*meet the team tables*/
.meettheteam{
width: 550px;
}
.meettheteamleft {
float:left;
text-align: center;
width:130px;
border-right-width: 1px;
border-right-style: dotted;
border-right-color: #CCCCCC;
}
.meettheteamright {
float:right;
width:410px;
}


This is the snipit from the wordpress page file.

<div class="meettheteam">
<h2>Their name - Position</h2>
<span class="meettheteamleft">
<img class="alignnone size-full wp-image-18" title="man" src="image file here.jpg" alt="man" width="101" height="142" />
</span><span class="meettheteamright">
information on them
</span></div>

This displays nicely, however, the issue I am having is when I copy this code to add other staff members. I'm sure i'm being stupid somewhere, but, basically their information starts on the right of this box and goes all weird.

How can I get it so they all display properly, without bodging it with tables/making enough meettheteam1, 2, 3,4 to cover every staff member?

Thank you in advance!!

Have you tried the Firebug Firefox plugin, a brilliant tool for diagnosing CSS problems. :)

Did you try adding a clear div before the end of that code? like

<div class="meettheteam">
<h2>Their name - Position</h2>
<span class="meettheteamleft">
<img class="alignnone size-full wp-image-18" title="man" src="image file here.jpg" alt="man" width="101" height="142" />
</span><span class="meettheteamright">
information on them
</span>
<div class="clear"></div>
</div>


.clear {
clear:both;
}

Let's put <div class="clear"></div> at the bottom, before the last div tag.

thanks guys. The clear tag has worked :)

Unfortuantely, wordpress keeps deleteing it when I go on visual mode, rather than HTML mode. Silly software :)