Divs and vertical centering images inside divs
===

I'm new to working with divs, so I'm not too good at using them. I'm making a music blog, and I want the user to be able to see the picture for the post, and arrows on either side to go to next or previous posts. I'm having trouble centering the arrows in my parent div. 

I searched a few things online, but nothing seemed to work. Here is my css for a simple test...

    #picture_wrapper {
	  width:550px;
	  background-color:#00F;
	  float:left;
    }

    #picture_container {
	  width: 500px;
	  float: left;
	  padding-left:5px;
	  padding-right:5px;
    }

    #left_arrow_container {
	  float: left;
	  top:50%;
	  width: 20px;
	  height:100%;
	  background-color: #F00;
    }

    #right_arrow_container {
	  float: right;
	  top:50%;
	  width: 20px;
	  height:100%;
	  background-color: #F00;
    }
    
I set the arrow divs to have a background color of red, and I thought with this code the entire right and left sides would be red, but this is not the case. Only the area around my image is red. Here is the html that I am using.

    <div id="picture_wrapper">
      <div id="left_arrow_container"><img src = 'http://www.startingtofeelit.com/images/slider_left_arrow.png' width = '20' height = '34px'/></div>
      <div id="picture_container"><center><img src = 'http://www.startingtofeelit.com/wp-content/uploads/2012/07/DIIV+zachacry+cole+smith2.jpg' width = '500' /></center></div>
      <div id="right_arrow_container"><img src = 'http://www.startingtofeelit.com/images/slider_right_arrow.png' width = '20' /></div>
    </div>

Here is how it is being displayed on my Dreamweaver now...
![pic1](http://www.startingtofeelit.com/images/pic1.png)

Here is how I more or less want it to be displayed...
![pic2](http://www.startingtofeelit.com/images/pic2.png)

Thanks for the help.