Trouble lining up divs again

HTML & CSS
1

Trying to get this multi-div setup to line up correctly, some of it does, some of it doesn’t… here is my code…


<?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:


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:


#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…

2

You’ll need to post just the HTML that is generated from the PHP for us to help with this. (We need to see what the browser sees, and PHP is removed before the page reaches the browser.)

Ideally,post a live link, or at least the full page code with CSS embedded, to make it easier to examine the page. Also try to account for any missing images.

3

I almost did that! hah.

Will do.

4

really rough, but I’m hurried and have to shut down in a minute… but here is the output of the first (working version) and the second (not working) version.

works:


<div id="container">
	<div id="genre">Thriller
		<div id ="status">Unwatched: 0, Watched: 1</div>
	</div>
	<div id='movie' class='WATCHED'>
	Movie Name
    <img src='status_watched.jpg'>
	</div>
	<br/>
</div>

doesn’t work:



<div id="container">
	<div id="genre">Thriller
		<div id ="status">Unwatched: 0, Watched: 1</div>
	</div>
	<div id='movie' class='WATCHED'>
	Movie Name
		<div id="moviestatus">
			<img src='status_watched.jpg'>
		</div>
	</div>
	<br/>
</div>

Sorry if that doesn’t help at all but I don’t have a live example just yet…

The only difference is that I have put a div around the <img> tag so that I may style the img separately from the movie name, but the img is not displaying on the same line as the movie name (it IS displaying correctly in the first version).

Again sorry if my examples are not helpful.

CSS is the same as in the original post obviously…

Please let me know if I can clarify anything else… if it is really too hard to help without a live example though, I understand.

5

you don’t have to use a div to style the img.

#movie img { your style rules…} ,(no div on the mark up)

6

Sorry, I’m an idiot, and what I am trying to do is THIS:


<div id="container">
 <!-- these appear next to eachother... -->
    <div id="genre">Thriller
        <div id ="status">Unwatched: 0, Watched: 1</div>
    </div>
<!-- these do not appear next to eachother -->
    <div id='movie' class='WATCHED'>
    Movie Name
    </div>
     <div id="moviestatus">
         <img src='status_watched.jpg'>
     </div>

    <br/>
</div>

Because I need to style the moviestatus separately and NOT have it affected by the class on the movie div…

But it always appears on the next line… is there any way at all to make it appear on the same line as the div above it?

I’ve tried just having the img outside of the movie div, but not within a div itself, but it still appeared on the next line. Gotta be some sort of CSS I am missing? Or am I just going to have to give it a negative top margin to put it in place…

7

I’m silly and putting float:left on both of the divs that I want on the same line seems to have solved this issue…

:blush::blush:

8

Though I was hoping to be able to do float: right on the moviestatus div, but that breaks it. :confused:

9

Could you post a screen shot of what you are aiming at, as I’m a bit in the dark as to what you are aiming for here.

10

Sorry for the late reply, I got it sorted, I feel kinda dumb.

Sticking float: left; on both divs does seem to work fine and solve my issue. :slight_smile: