Floated images stacked - html

Question

I am trying to create a list of actors in a film with a small profile image to the left of the actor's name and their accompanying character, however my images are strangely stacking on top of one another, and I'm not sure why. The cast names, their character and the image are all being pulled in dynamically from an external API.
Below is an image of the current layout:
The accompanying HTML and CSS is below:
HTML
<?php
foreach($tmdb_cast['cast'] as $castMember){
if ($tmp++ < 10)
echo '<img src="http://cf2.imgobject.com/t/p/w45' . $castMember['profile_path'] . '" class="actor_image" alt="' . $castMember['name'] . '" title="' . $castMember['name'] . '" />';
echo '<p>' . $castMember['character'] . ' - ' . $castMember['name'] . '</p>';
}
echo '<p id="morecast">[...view all cast]</p>'
?>
CSS
#cast {
margin-left: 50%;
border: solid 1px red;
}
.actor_image {
float: left;
}
#morecast {
text-align: right;
}
The layout I'm trying to achieve is something similar to the one on display at IMDb, with the actor's name and character vertically aligned with the image:

Answer 1

It looks like you're floating your images, but not applying a "clear" between your image+text units. Try applying a "clear: both;" between each actor instance?

Answer 2

Wrap the image and p elements in a div and have clear:both on the div. Set the inline style to a class. I did it inline as a quick-and-dirty example.
foreach($tmdb_cast['cast'] as $castMember){
if ($tmp++ < 10)
echo '<div style="clear: both;">'
echo '<img src="http://cf2.imgobject.com/t/p/w45' . $castMember['profile_path'] . '" class="actor_image" alt="' . $castMember['name'] . '" title="' . $castMember['name'] . '" />';
echo '<p>' . $castMember['character'] . ' - ' . $castMember['name'] . '</p>';
echo '</div>'
}

Answer 3

I'ts convenient to create a css class that wraps every image and text group:
echo '<div class="actor">
<img src="http://cf2.imgobject.com/t/p/w45' . $castMember['profile_path'] . '" class="actor_image" alt="' . $castMember['name'] . '" title="' . $castMember['name'] . '" />';
echo '<p>' . $castMember['character'] . ' - ' . $castMember['name'] . '</p>
</div>';
And float each container
.actor{
float:left;
clear: left;
}
Now you have a box arround the image+text group that you can float. If this doesn't fix the problem, next step is define the .actor "width" property