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

Question

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">
        <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:[email protected]">[email protected]</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

Answer 1

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.

Answer 2

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

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