How to get blue div in line of yellow div without changing the html

How to get blue div in line of yellow div without changing the html and without using negative top margin on blue div?

css

  <style type="text/css">
      #main {width:600px;border:1px solid red;overflow:hidden;height:800px}
      .float-left {width:200px;height:100px}
      #right-side {float:right;background:blue;width:400px}
      #one {background:yellow}
      #two {background:green}
      #three {background:brown}
      #four {background:orange}
      </style>

html

    <div id="main">

      <div class="float-left" id="one">
    开发者_StackOverflow中文版    <img width="129" height="150" alt="" src="jmg.jpg">
      </div>

      <div class="float-left" id="two">bbbbbbb, Abbbbbbb</div>
      <div class="float-left" id="three">+77 (0) 778 16887 399</div>

      <div class="float-left" id="four"><a href="mailto:ccc@cccc.com">ccccc@cccc.com</a></div>

      <div id="right-side">
          <p>hello how are you.</p>
          <p>i'm fine</p>
      </div>
    </div>

See live example here http://jsbin.com/uvuyo3/3

position: relative the container, then absolutely position that blue div top right

http://jsbin.com/uvuyo3/4/

If the left column will always be 200px wide, you can absolutely position it:

#main {width:600px;border:1px solid red;overflow:hidden;height:800px;position:relative;}
.float-left {width:200px;height:100px}
#right-side {float:right;background:blue;width:400px;position:absolute;left:200px;top:0;}

Don't forget the position:relative; on #main.