Div not aligning properly using css grid

I'm using the 960 Grid System on this page where I list my instapaper bookmarks: http://labs.tonyhue.com/bookmarks/

However, the social media section is set off fro开发者_开发问答m the rest. It should be aligned to the right following the programming section. Any ideas?

Add a (fixed) height to your .grid_6-Container.

.grid_6 {height:250px; /*or something else*/}

Your Problem occurs on floated elements with different height.

Nice reading about floatings: http://coding.smashingmagazine.com/2007/05/01/css-float-theory-things-you-should-know/

Edit: Otherwise you could add a wrapper element to clear your floats:

<div class="wrapper">
     <div class="grid_6"></div>
     <div class="grid_6"></div>
</div>

<div class="wrapper">
     <div class="grid_6"></div>
     <div class="grid_6"></div>
</div>

You can clear your floats with .wrapper {overflow:hidden;} OR you can use the clearfix method: http://perishablepress.com/press/2009/12/06/new-clearfix-hack/