Styling <divs> with CSS3

Question

I'm able to align and center graphpaper and footer as needed but I'm unable to get the colorpicker div to exist next to these to. No matter what I try it ends up being below the rest of these. Is there a way to have the two divs centered vertically and then put the colorpicker div next to these two?

<div id="abstract">
   <div class="graphpaper" id="graphpaper" onclick="getPosition(event)" style="width:984px; height:1100px;">
      <img src="images/poster/poster-top.png" align="left"/>
      <img src="images/poster/poster-left.jpg" align="left" style="margin-left:12px;"/>
      <canvas id ="canvas" width = "898" height = "900"/>
      <img src="images/poster/poster-right.jpg" align="right" style="margin-right:10px;"/>        
</div>
<div class="footer" id="footer">
      <img src="images/poster/poster-bottom.png"/>
</div>
<div class="colorpicker" id="colorpicker" style="width: 70px; clear:both;">
    <img src="images/color-tab/no-color.png" id="unselected" class="unselected"/><br>
    <img src="images/color-tab/color-dark.png" id="dark_image" class="darkimage" 
   onclick="getColor('#00ccff','images/color-tab/color-dark.png')"/><br>
    <img src="images/color-tab/color-medium.png" id="med_image" class="medimage" 
   onclick="getColor('#000000','images/color-tab/color-medium.png')"/><br>
    <img src="images/color-tab/color_light.png" id="light_image" class="lightimage"     
   onclick="getColor('#ff0066','images/color-tab/color_light.png')"/><br><br><br><br>
</div>
</div>

Answer 1

1.) Removed the Footer div and added the img to the graphpaper div
2.) set colorpicker to position:fixed; and set margin-top:300; so it would be starting in the proper place.

Answer 2

In order to do this you need to float all of your divs to the left, and give them widths that add up to 100% (ie. 40%, 40%, 20%).

This is my best guess without seeing your question as a jsfiddle