Float Problem with Div

I will just start with my code.
CSS:

.FullMessage {
width: 292px;
}

.NameTime {
padding: 4px;
float: left;
}

.Messages {
padding: 4px 4px 4px 0px;
float: left;
}


HTML:

<div id="ChatRoom">
<div class="FullMessage">
<div class="NameTime"><a href="#">alyis</a> (9:25 AM):</div><div class="Messages">Hi everyone this is my first message in the chat room.</div>
</div>
<div class="FullMessage">
<div class="NameTime"><a href="#">alyis</a> (9:26 AM):</div><div class="Messages">Hi everyone this is my first message in the chat room.</div>
</div>
<div class="FullMessage">
<div class="NameTime"><a href="#">BillyBoB6969</a> (9:27 AM):</div><div class="Messages">Stop double posting nooby nobody cares.</div>
</div>
</div>


The problem is that They aren't going side by side like they should this is in firefox I just don't get why it would do this....

If you need to see it in action the url is http://syckgamingleague.com/
Login with Username: Test Password: test123. Then click Chat at top.

I havn't checkd your site, but you may need to increase the width of .FullMessage as each element requires it's own space in the document(unless they are positioned to overlap)

I see what you are saying is there a way to make it to were if the message is too long that it would just go to the next line? because thats what is happening...

Nevermind I have went with another solution.