Divs side by side - css

Question

I'm having some issues by placing 3 divs on the left side... and 1 on the right...
It works perfect if there is only 1 div on each side...
I have a news section... That creates a new div for each news there is.
I will get 5 of these per page...(with more than 1... The div on the right side... will get pushed down....)
<?php foreach ($news as $news_item): ?>
<div id="NewsPageContent">
THIS STUFF
</div><!--End NewsPageContent-->
<?php endforeach ?>
All the code:
<div id="boxes">
<?php foreach ($news as $news_item): ?>
<div id="NewsPageContent">
THIS STUFF
</div><!--End NewsPageContent-->
<?php endforeach ?>
<div id="PlayersOnline">
<h2>Players Online</h2><hr />
<div id="heads">
This is the div to the right
</div><!--End heads-->
</div><!--End PlayerOnline-->
<div id="clear"></div>
</div><!--End boxes-->
css:
#boxes{
width: 100%;
overflow: hidden;
clear:both;
margin-top: 10px;
}
#NewsPageContent {
margin-top:10px;
float:left;
width: 63%;
background: #fefefe;
border-radius: 5px 5px 5px 5px;
-moz-border-radius: 5px 5px 5px 5px;
-webkit-border-radius: 5px 5px 5px 5px;
min-height: 100px;
color: #7c7c7c;
font-family: Helvetica, Arial, Verdana, sans-serif;
font-size: 15px;
padding-top: 1px;
padding-left: 10px;
padding-right: 10px;
padding-bottom: 10px;
border: 1px solid #a7a6a6;
}
#PlayersOnline{
float:right;
width: 32%;
background: #fefefe;
border-radius: 5px 5px 5px 5px;
-moz-border-radius: 5px 5px 5px 5px;
-webkit-border-radius: 5px 5px 5px 5px;
min-height: 350px;
color: #7c7c7c;
font-family: Helvetica, Arial, Verdana, sans-serif;
font-size: 15px;
padding-top: 1px;
padding-left: 10px;
padding-right: 10px;
padding-bottom: 10px;
border: 1px solid #a7a6a6;
}
EDIT:
The HTML from my browser:
<div id="boxes">
<div class="NewsPageContent">
<div id="news_title">
<h3>HomieCraft</h3><hr />
<div id="newsbuttons" style="float: right; font-weight: normal;">Read | Comment(6)</div>
<p style="font-weight: normal; font-size: 9px; margin-top: 1px; margin-bottom: 0px;margin-left: 2px; padding-bottom: 2px;">Published 26-04-2013 23:39 by GudfareN </p>
</div>
<div style="padding-bottom: 6px;" id="news_text">
<p> HomieCraft awwwwyeeeee</p>
</div>
</div><!--End NewsPageContent-->
<div class="NewsPageContent">
<div id="news_title">
<h3>HomieCraft</h3><hr />
<div id="newsbuttons" style="float: right; font-weight: normal;">Read | Comment(6)</div>
<p style="font-weight: normal; font-size: 9px; margin-top: 1px; margin-bottom: 0px;margin-left: 2px; padding-bottom: 2px;">Published 26-04-2013 23:39 by GudfareN </p>
</div>
<div style="padding-bottom: 6px;" id="news_text">
<p> HomieCraft awwwwyeeeee</p>
</div>
</div><!--End NewsPageContent-->
<div class="NewsPageContent">
<div id="news_title">
<h3>HomieCraft</h3><hr />
<div id="newsbuttons" style="float: right; font-weight: normal;">Read | Comment(6)</div>
<p style="font-weight: normal; font-size: 9px; margin-top: 1px; margin-bottom: 0px;margin-left: 2px; padding-bottom: 2px;">Published 26-04-2013 23:39 by GudfareN </p>
</div>
<div style="padding-bottom: 6px;" id="news_text">
<p> HomieCraft awwwwyeeeee</p>
</div>
</div><!--End NewsPageContent-->
<div class="NewsPageContent">
<div id="news_title">
<h3>HomieCraft</h3><hr />
<div id="newsbuttons" style="float: right; font-weight: normal;">Read | Comment(6)</div>
<p style="font-weight: normal; font-size: 9px; margin-top: 1px; margin-bottom: 0px;margin-left: 2px; padding-bottom: 2px;">Published 26-04-2013 23:39 by GudfareN </p>
</div>
<div style="padding-bottom: 6px;" id="news_text">
<p> HomieCraft awwwwyeeeee</p>
</div>
</div><!--End NewsPageContent-->
<div class="NewsPageContent">
<div id="news_title">
<h3>HomieCraft</h3><hr />
<div id="newsbuttons" style="float: right; font-weight: normal;">Read | Comment(6)</div>
<p style="font-weight: normal; font-size: 9px; margin-top: 1px; margin-bottom: 0px;margin-left: 2px; padding-bottom: 2px;">Published 26-04-2013 23:39 by GudfareN </p>
</div>
<div style="padding-bottom: 6px;" id="news_text">
<p> HomieCraft awwwwyeeeee</p>
</div>
</div><!--End NewsPageContent-->
<div id="PlayersOnline" style="margin-top: 10px;">
<h2>Players Online</h2><hr />
<div id="heads">
</div><!--End heads-->
</div><!--End PlayerOnline-->
<div id="clear"></div>
</div><!--End boxes-->

Answer 1

Position your PlayersOnline absolute and give a relative position to your #boxes.
Then put right: 5px; on your PlayersOnline div and here's what you get.
http://jsfiddle.net/24LtW/
Also note you should not give the NewsPageContent an id, but a class attribute.

Answer 2

I've fixed the html you pasted, produced what I think it is you wanted...
code at this jsFiddle
.NewsPageContent /*now a class not id as suggested in comments*/
and...
<div id="PlayersOnline"> is placed above <div class="NewsPageContent">
Basically, I moved your 'floating to the right' box to the top of the html, above the 'floating to the left' boxes. If the screen width is too short the boxes will misalign themselves on top of one another, but if you place all your html into a fixed width div the width of your intended design, the div's should never 'stack' themselves.
I also, changed your 'id' to a 'class' where required as pointed out #Fabrizio