I have a div in the right side of the page and a header on top, e.g:

![enter image description here](https://i.stack.imgur.com/ltcq5.png)

So i have the div of the menu and I wrapped it in another div, setting it to float to the right, additionally, before the menu div i have the header div on top.
What I'm trying to do is make another 2 sections one of them should be an iFrame (don't shoot me please), 

whenever I try to add other divs, either the menu is getting on top of them or they just placed underneath the end of the menu.
I want it to be like that:
![enter image description here](https://i.stack.imgur.com/jhPBz.png)

this is a part of the code:

```
<div id="header">
    <h1>Pre-Test</h1>
</div>

<div id="wrap" style="right: 0;height: 100%; width: 100%; position: absolute; overflow-y: scroll;">
        <div id='cssmenu'>
        <ul>
       <li class='active'><a href='#'><span>Home</span></a></li>
       <li class='has-sub'><a href='#'><span>Products</span></a>
          <ul>
             <li><a href='#'><span>Product 1</span></a></li>
             <li><a href='#'><span>Product 2</span></a></li>
             <li><a href='#'><span>Product 3</span></a></li>
          </ul>
       </li>
     ...
    </div>
</div>
<div class="two_main_frames">
    <div class="main_right_frame">
        <iframe src="http://www.amazon.com">
        </iframe>
    </div>
</div>

```

and the CSS:

```
.two_main_frames {
    direction: rtl;
    width: 80%;
    /*height: 100%;*/

}

.main_right_frame {
    width: 50%;
    height: 100%;
    overflow-y: scroll;
    font-size: 14px;
    float: right;
    direction: rtl;
    clear: both;
}

```

You can check out the code over here:
<http://jsfiddle.net/xQgSm/124/>

p.s: I don't know if it has anything to do with this but when i open it in mp phone it shows pretty messed up. is there any way to fix that too?
thanks.