Trying to get this multi-div setup to line up correctly, some of it does, some of it doesn't.. here is my code..
Code php:
<?php
echo '<div id="container">';
 
foreach ($groups as $genre_abbreviation => $movies) {
	echo '<div id="genre">';
		echo "$genre_abbreviation";
			echo '<div id ="status">';
				echo 'Unwatched:' .$status[$genre_abbreviation]['UNWATCHED'] . ' , ' . 'Watched:' . $status[$genre_abbreviation]['WATCHED'];
			echo '</div>';
	echo '</div>';
 
foreach ($movies as $movie) {
	echo "<div id='movie' class='" .$movie['movie_status'] ."'>";
		echo "$movie[movie_name]";
		echo "<img src='" . 'status_' . $movie['movie_status'] . '.jpg' . "'>";
	echo "</div>";
	}
echo '<br/>';
}
echo '</div>';
?>

I wanted to make the img part have it's own div for styling purposes, so I did this.. basically a mirror of the div style of the (working) first part of the code:

Code php:
foreach ($movies as $movie) {
	echo "<div id='movie' class='" .$movie['movie_status'] ."'>";
           echo "$movie[movie_name]";
 
        echo "<div id='moviestatus'>"
           echo "<img src='" . 'status_' . $movie['movie_status'] . '.jpg' . "'>";
        echo "</div>"
 
	echo "</div>";
	}

But the moviestatus div just doesn't line up. I can't figure out why. The img always appears on the line under the movie name.

Here is my CSS:

Code CSS:
#container {padding: 5px; margin-left: 40px; margin-right: 40px;}
#genre {border: solid 1px black; margin-bottom: 5px;}
#movie {border: solid 1px #000000; color: #000000; padding: 5px; line-height: 1em;}
#status {float: right; padding-right: 5px;}

If anyone has any ideas I would be beyond happy.. this one has really been hurting my head for days now...