Arrange divs inside parent - align right div to top

Question

I have the following where I want the right div to align to the top of the parent, but it's just not happening for me..

<div id="container">
    <div id="center">Center</div>
    <div id="left">Left text here...</div>
    <div id="right"><img src="image.png" width="75" height="75" /></div>
</div>

CSS

#container{
  width:50%;
  overflow:auto;
  border-style:solid;
  border-width:1px;
  border-color:#aaaaaa;
  vertical-align: top; 
}

#left{
  width:100px;
  border-style:solid;
  border-width:1px;
  border-color:#aaaaaa;
}

#right{
  float:right;
  width:100px;
  text-align:right;
  vertical-align: top; 
  border-style:solid;
  height:100px;
  width:100px;
  border-width:1px;
  border-color:#aaaaaa;
}

#center{
  float:left;
  padding-bottom: 10px;
  width:100px;
  border-style:solid;
  border-width:1px;
  border-color:#aaaaaa;
}

Fiddle at http://jsfiddle.net/w3Gcb/

Answer 1

If you swap the left div with the right one, then the right div goes to top:
Fiddle

Answer 2

<div id="container">
 <div id="right"><img src="image.png" width="57" height="57" /></div>
 <div id="center">Centre</div>
 <div id="left">Left text here...</div>

</div>

In Css

#right{
    float:right;
    width:100px;
    text-align:right;
    vertical-align: top; 
    border-style:solid;
    height:100px;
    width:100%;
    border-width:1px;
    border-color:#aaaaaa;
}

Try this...