Float issue css in 960 grid - css

Question

here's what I wan't to create: http://i.imgur.com/9KdL0UW.jpg, here's what I have: http://i.imgur.com/mRDWoRo.jpg. My problem is the layout of news, as you can see, it's not working properly. I'm working with 960 grid and don't know how to reference it in the fiddle, so i posted is as an image instead.
html:
<div class="highlightednews grid_3">
<h4>News Preview</h4>
<h2>Under The Dome: “Big Jim is just too fat, we have to fire him!”</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis et dolor pellentesque.</p>
</div>
<div class="highlightednews grid_3">
<h4>News Preview</h4>
<h2>Under The Dome: “Big Jim is just too fat, we have to fire him!”</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis et dolor pellentesque.</p>
</div>
<div class="highlightednews grid_3">
<h4>News Preview</h4>
<h2>Under The Dome: “Big Jim is just too fat, we have to fire him!”</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis et dolor pellentesque.</p>
</div>
<!--FEATURED NEWS-->
<div class="featurednews grid_3 ">
<h3>How am I gonna be an optimist about this? </h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis et dolor. </p>
<p>posted 15th November </p>
</div>
<div class="featurednews grid_3 ">
<h3>How am I gonna be an optimist about this? </h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis et dolor. </p>
<p>posted 15th November </p>
</div>
<div class="featurednews grid_3 ">
<h3>How am I gonna be an optimist about this? </h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis et dolor. </p>
<p>posted 15th November </p>
</div>
<div class="featurednews grid_3 ">
<h3>How am I gonna be an optimist about this? </h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis et dolor. </p>
<p>posted 15th November </p>
</div>
<div class="featurednews grid_3 ">
<h3>How am I gonna be an optimist about this? </h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis et dolor. </p>
<p>posted 15th November </p>
</div>
<!--NEWEST-->
<div class="newest grid_9">
<h1>Almost Human starting in one week!</h1>
<p>posted 15th November by Andrew</p>
<p>News Preview</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec faucibus suscipit metus non pellentesque. Aliquam erat volutpat. Suspendisse nec posuere erat. Cras in sem sed erat hendrerit tempus ac a sem. Fusce laoreet nulla in dolor feugiat, non adipiscing ante pharetra. Nunc pretium dui quis augue pretium, elementum varius odio interdum. Duis sit amet</p>
<p>Social Buttons</p>
<ul>
<li>255 COMMENTS</li>
<li>READ MORE</li>
</ul>
</div>
<div class="newest grid_9">
<h1>Almost Human starting in one week!</h1>
<p>posted 15th November by Andrew</p>
<p>News Preview</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec faucibus suscipit metus non pellentesque. Aliquam erat volutpat. Suspendisse nec posuere erat. Cras in sem sed erat hendrerit tempus ac a sem. Fusce laoreet nulla in dolor feugiat, non adipiscing ante pharetra. Nunc pretium dui quis augue pretium, elementum varius odio interdum. Duis sit amet</p>
<p>Social Buttons</p>
<ul>
<li>255 COMMENTS</li>
<li>READ MORE</li>
</ul>
</div>
<div class="newest grid_9">
<h1>Almost Human starting in one week!</h1>
<p>posted 15th November by Andrew</p>
<p>News Preview</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec faucibus suscipit metus non pellentesque. Aliquam erat volutpat. Suspendisse nec posuere erat. Cras in sem sed erat hendrerit tempus ac a sem. Fusce laoreet nulla in dolor feugiat, non adipiscing ante pharetra. Nunc pretium dui quis augue pretium, elementum varius odio interdum. Duis sit amet</p>
<p>Social Buttons</p>
<ul>
<li>255 COMMENTS</li>
<li>READ MORE</li>
</ul>
</div>
css:
.grid_3{
background-color: orange;
margin-bottom:10px;}
.grid_9 {
background-color: pink;}
.highlightednews{
float:left;}
.featurednews{
float:right;
background-color:green;
clear:both;}

Answer 1

Your problem here is to do with how your elements are nested. You need to have two parent divs to hold your content like so
<!-- THIS IS THE LEFT COLUMN -->
<div class="grid_9">
<div class="grid_3">
NEWS ITEM
</div>
<div class="grid_3">
NEWS ITEM
</div>
<div class="grid_3">
NEWS ITEM
</div>
<div class="grid_9">
Full width item
</div>
</div>
<!-- THIS IS THE RIGHT COLUMN -->
<div class="grid_3">
<div>FEATURED NEWS ITEM</div>
<div>FEATURED NEWS ITEM</div>
</div>