I have just started with css, so please be patient with me

I have split up part of a page with left and right classes which works perfectly, until the browser window is narrowed - upon which the right class wraps below the left class and justifies to the left.
Is there any way to prevent this from happening?

Here's the css:
Code:
#main {
  margin:auto;
  width:730px;
  text-align:left;
  }  
div.main span.left {
  float:left;
  width:500px;
  }  
div.main span.right {
  width:200px;
  background-image:url("./1.gif");
  background-repeat:repeat-y;
  margin-left:20px;
  }
div.float {
  float: left;
  margin-left:5px;
  margin-top:15px;
  padding:4px;
  }
and the html code:
Code:
<div class=main>
  <span class="left">
    <font class=tnc_large style="margin-left=10px; padding=10px; font-size: 20px; color=#999999;">
      <i>blah blah blah</i>
    </font>
    </br>
    <div class="float">
      <p><a href="#" class=tnc_body style="color:#000000; margin-left:5px;">blah</br>
      <img src="#" border=0></a>
    </div>
  </span>
  <span class="right">
    <font class=tnc_title_grey style="margin-left=10px; padding=5px; height=150px;">
      <i>blah</i>
    </font>
    </br>
    <img style="margin-left=10px; margin-right=40px; width=100px; height=1px;"src="./2.gif">
    </br>
  </span>
</div>
Thanks,
Ben