<div id="staff-columns">
<div class="col-left-staff">
<img src="images/bernard.jpg" width="250" height="250" alt="Bernard Gallagher" class="no-border" />
</div>
<div class="col-right-staff"><br /><br /><br />
<h3>Bernard Gallagher - Managing Director</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. </p>
</div>
</div>
<div id="staff-columns">
<div class="col-left-staff-odd">
<h3>Noel Davidson - Sales, Dublin</h3><br />
<p><strong>Mobile: +353 87 771 2225</strong></p>
<p>Noel Davidson has been with BJ Marine since 2001. Noel was Marketing Distribution Manager with Quinnsworth before coming to BJ Marine to “work at his hobby”. He is a qualified Yachtmaster, a member of Howth Yacht Club where he can regularly be seen helming his boat in the Club regattas and has a wide knowledge of both power and sail boats. Noel is passionate about his industry both professionally and socially and is well known member within the marine industry</p>
</div>
<div class="col-right-staff-odd">
<img src="images/noel.jpg" width="250" height="250" alt="Noel Davidson" class="no-border" />
</div>
</div>
You’re using duplicated ids of “staffs-columns”..bad practice..Always keep in mind : IDs are unique, classes may be multiple
So, the problem you’re getting on your pages is quite ‘normal’. I believe you’re using floats to display the photo on left, text on right and vice-versa. You should always clear the float before leaving the container, i.e, div#staff-columns.
Regards,