Two divs on top of each other for team page - html

Question

I realize this is probably another newbie question but I have tried different things and can't make this work. I am basically building a team page where I want to have a picture on the left side and some text on the right side for each team member. Under the name of the person comes the title, and below that (between title and a paragraph) is a bunch of badge links for email, LinkedIn, and Twitter. For the purpose of having the badges align perfectly below the title, I have used a table. I want to repeat that set up for each team member and have them stack on top of each other.
What I have right now for one person (which displays correctly) in html:
<div class="left">
<img src="url"/>
</div>
<div class="right">
<H3>Name</H3>
<H4>Title</H4>
<table>
<tr>
<td><a href="mailto:email"><img src="url"/></td>
<td><img src="url"/></td>
<td><img src="url"/></td>
</tr>
</table>
<p>Experience</p>
<p>Experience</p>
<p>Experience</p>
</div>
And here is the CSS:
.left img{
position:relative;
float:left;
height:15%;
width:15%;
top:50px;
}
.right{
position: relative;
float:left;
margin-top:10px;
}
.right h3{
color:#39c388;
font-weight:bold;
font-family:Arial,sans-serif;
font-size:28px;
position:relative;
top:30px;
left:20px;
}
.right h4{
color:#818286;
font-family:Arial,sans-serif;
font-size:24px;
position:relative;
top:20px;
left:20px;
}
.right td img{
width:20px;
height:20px;
position:relative;
top:20px;
left:20px;
}
.right td{
width:30px;
}
.right p{
color:#818286;
font-family:Arial,sans-serif;
font-size:20px;
position:relative;
top:40px;
left:20px;
}
So far so good. Now, I want to replicate this code and have these section stack up on top of each other. How would you do that? I have tried having a div around this whole html code and then give that div a class, and used position, z-index, etc but without any success.

Answer 1

If you mean 'stack on top of each other' as in layered over each other, then you need to use:
{position: absolute; top: 0; left: 0} (having top and left position to the position you require)
on the container <div>s for each section.
However, if you mean 'stack on top of each other' as in listed down the page, then it should work with a container <div> as is. You may need to give the container <div> and the left div an {overflow: hidden} (and {height: 1%} for IE 6 - 8) to count for the floating child elements within them.