Why won't my image float right.

I was sure I had this one in the bag!!!
playing around wit some basic stuff regarding floats but I can not seem to get it to work.
HTML:

<div id="test-page">
    <div id="test-content">
        <h2>
            SECTORS / INDUSTRIES
        </h2>
     <div id="test-p1">
            <p>
                blau blau blaudi blau
           </p>
     </div>
        <div id="test-image">
            <img alt="Sectors / Industries" src="http://localhost/coinlogistics/wp-content/uploads/2013/05/sectors1.jpg" />
      </div>
    </div>
</div>

CSS to float header and para left and image right.

#test-page {
  clear: left;
  width: 100%;{
#test-content {
  clear: left;
  float: left;
  width: 40%;
  margin: 0;
  display: inline;}
#test-p1 {
  font-family: Helvetica, 'calibri', arial, sans-serif;
  font-size: 18px;
  line-height: 1.2em;
  margin: 5px;
}
#test-image {
  float: right;
  height: 500px;
  width: 350  px;
  margin: 0;
  display: inline;
}

I have even trying this code in CSSdesk to see if it was maybe a conflict within the them page templates but the same thing happened..
ANY ADVISE PLEASE.