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\[code\]<?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"><a href="http://www.imdb.com/title/' . $imdb_id . '/fullcredits" alt="View full cast list on IMDb">[...view all cast]</a></p>'?>\[/code\]CSS\[code\]#cast { margin-left: 50%; border: solid 1px red;}.actor_image { float: left;}#morecast { text-align: right;}\[/code\]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:
