Kinda position problem

Hi again!

I have following problem:

http://img527.imageshack.us/img527/6708/probyt1.jpg

I just can't seem to make the second row to display as the first one. Here's the code:

<div id="centerdiv-movie">

<div class="movie-container">
<div class="movie-thumb"><img src="Movies.gif" alt="Test Movie" border="0" /></div><div class="movie-text"><h4>Test Movie</h4>This is just a test movie. Maybe iut will work maybe now who knpwsk kpadskpo akpa kpad kpad kpasd kps adkpasdkpsdakpsda kps adk sdks dk dkd kfd kdf kdf kpdf kpd fkpfd pkf kpfd kpfd pkpkdfpkdf k fdpkf dkpf dpd</div><div class="movie-button"><img src="Movies_37.gif" alt="Download" border="0" /><br/><br/><img src="Movies_37.gif" alt="View" border="0" /> On YouTube.com</div></div>

<div class="movie-container">
<div class="movie-thumb"><img src="Movies.gif" alt="Test Movie" border="0" /></div><div class="movie-text"><h4>Test Movie</h4>This is just a test movie. Maybe iut will work maybe now who knpwsk kpadskpo akpa kpad kpad kpasd kps adkpasdkpsdakpsda kps adk sdks dk dkd kfd kdf kdf kpdf kpd fkpfd pkf kpfd kpfd pkpkdfpkdf k fdpkf dkpf dpd</div><div class="movie-button"><img src="Movies_37.gif" alt="Download" border="0" /><br/><br/><img src="Movies_37.gif" alt="View" border="0" /> On YouTube.com</div></div>
</div>

and the CSS:

#centerdiv-movie { width:653px;
margin-right:auto;
margin-left:auto;
}

.movie-container { width:653px;
margin-bottom:10px;
}

.movie-thumb { width:130px;
float:left;
text-align:left;
margin-right:5px;
}


.movie-text { background-color:#333333;
width:316px;
padding-top:6px;
padding-bottom:8px;
padding-left:5px;
padding-right:5px;
float:left;
text-align:center;
margin-left:5px;
font-family:Arial;
font-weight:normal;
font-size:12px;
color:#ffffff;
}

.movie-button { background-color:#333333;
width:170px;
padding-top:6px;
padding-bottom:8px;
padding-left:5px;
padding-right:5px;
float:left;
text-align:left;
margin-left:5px;
font-family:Arial;
font-weight:normal;
font-size:12px;
color:#ffffff;
}

I have tried for hours to solve the problem, but I just can't get the hang of it. It's validated with W3C.

Set a height on 'movie container'. Because your buttons section is smaller than the text the next image is being floated under it and next to the previous movie-text, rather than on a separate new line. You could clear your floats after the movie button as well, which should work... add clear: both; to movie-button.

You could also make your code so much more condensed by changing all of the padding into one line and the same with your fonts:

padding: 6px 5px 8px 5px;
font: normal 12px Arial, sans-serif;

Yeah, I just wondered if it could be done without to set a specific height - couldn't. Also, it dosn't work out, at least not in IE6, if you use the clear floats command.

However now it works, thanks :)