Odd gap between CSS containers - html

Question

the following is my CSS code:
.portrait
{
width: 400px;
position: relative;
display: inline-block;
background-color: #4E5555;
}
.portrait img
{
width: 150px;
float: left;
padding-right: 20px;
}
.portrait h4
{
text-align: left;
margin: 0px 0px 0px 0px;
color: #fff;
}
And the following is my relevant html code:
<div class="portrait">
<img src="images\filmmakers\Aboui, Julian\JulianAboui-web.jpg">
<h4>Julian Aboui</h4>
</div>
<div class="portrait">
<img src="images\filmmakers\Alter, Aaron\AaronAlter-web.jpg">
<h4>Aaron Alter</h4>
</div>
<div class="portrait">
<img src="images\filmmakers\Abrahams, Pia\PiaAbrahams-web.jpg">
<h4>Pia Abrahams</h4>
<h4>STUFF STUFF STUFF STUFF STUFF STUFF STUFF STUFF STUFF STUFF STUFF</h4>
</div>
<div class="portrait">
<img src="images\filmmakers\Asnani, Shailen\ShailenAsnani-web.jpg">
<h4>Shailen Asnani</h4>
</div>
My output is the following:
http://i.imgur.com/YRkJvmn.png
I think I know what the problem is, but I'm not sure how to fix it. The last container element (on the bottom right) is placed further down because it thinks it is under the text. Is that correct? I'm unsure how to fix that.
Any help is appreciated, thank you!

Answer 1

Divs are finicky. I would recommend using ul with display:block inline. Just look at the page source of a web site where you can see something like that working. A snippet from my css where it works (I have a div inside the li withe text and multiple images)
div.list_holder {margin-bottom: 10px; clear: both; font-style:normal;}
ul.user_list {display:block; margin: 0px auto;}
li.list_item {list-style: outside none none; margin-right: -100%;
position: relative; padding: 0px; clear: none;
margin-bottom: 10px !important;
border: 2px solid !important; min-height: 325px;
max-width: 206px; float: left; margin-right: -100%;
width: 23.5%;border-radius: 2px;}

Answer 2

Not sure but a simple solution would be to display it as a table
.row {
display:table-row;
}
.portrait
{
width: 400px;
position: relative;
display: table-cell;
background-color: #4E5555;
}
.portrait img
{
width: 150px;
float: left;
padding-right: 20px;
}
.portrait h4
{
text-align: left;
margin: 0px 0px 0px 0px;
color: #fff;
}
And wrap the two rows you want in <div class='row'>

Answer 3

In my opinion for positioning these kind of containers you don't need to sue postion: relative if you have a bigger contaner/wrapper, which wraps the portraits and it is positioned via margins. In that case you can use margin to position your container. Also It is a good idea to use figure tag for the images if you want to style them little bit better and make them display: block if you want the text to be under the image.