Uneven Columns using CSS - html

Question

This problem references this page: 2-Column Team Page
NOTE: I had to remove some links because I am new to this site. Please look at the sample page.
I am using WordPress 3.5.1 and the Poloray theme.
I am creating a page of partners in my organization. The design calls for 2 columns: the left column has an image and the right column has an excerpt from the individual's bio page. Mousing over the image displays contact info (this works fine).
I have tried for several days to implement code that produced 2-columns within a theme . When I create one left/right column pair everything lines up. But once I replicate the code for the next person the second bio excerpt is pushed way down.
The code I found is:
<style><!--#columns { width: 600px; } #columns .column { position: relative; width: 46%; padding: 1%; } #columns .left { float: left; width: 30%; padding: 1%; } #columns .right
{ float: right; width: 65%; padding: 1%; }-->
<p style="text-align: left;"><strong>Leadership</strong></p>
<p>
<div id="columns">
<div class="left column"><figure><img class="alignnone" title="Vishal 415-894-5509 | vishal#anicon-group.com" alt="Vishal-Resume-Photo" src="**IMAGE LINK**" width="70" height="70" />
<figcaption>Vishal Parikh</figcaption></figure></div>
<div class="right column">Ex prompta apeirian nam, vix an rebum partem. Has pertinax gubergren necessitatibus eu, tamquam accommodare concludaturque eu eumsed cu...
Learn more about Vishal</div>
</p>
<p>
<div class="column"><figure><img class="alignnone" title="Richard 415-894-5255 | richard#anicon-group.com" alt="Richard Targett" src="**IMAGE LINK**" width="70" height="70" />
<figcaption>Richard Targett</figcaption></figure></div>
<div class="right column">Rick has more than 20 years of experience leading efforts in financial services and entrepreneurial ventures including 12 years in capital markets with a global Wall Street investment banking firm, 10 years in senior role for a big 4 firm...
Learn more about Rick</div>
</p>
The divs repeat for each person. I have played with the widths, position (relative vs. absolute), making the second div start with the ".column" class vs. "left-column". Nothing seems to work.
This solution is the closest to giving me the desired effect. I tried other approaches using the <li> tag but the results were worse.

Answer 1

Wrap every left and right content with an element with a class say column-wrap i.e .left and .right elements will be wrapped with column-wrap. Repeat the .column-wrap block. See fiddle.
HTML
<div id="columns">
<div class="column-wrap">
<div class="left column">
<!--left content-->
</div>
<div class="right column">
<!--right content-->
</div>
</div>
<div class="column-wrap">
<div class="left column">
<!--left content-->
</div>
<div class="right column">
<!--right content-->
</div>
</div>
</div>
CSS
#columns .column-wrap {
overflow:hidden;
}