How to force div to appear below another div

Question

I have 2 divs that one is appear at the right, and the other one appear at the left.

However, when i try to add one more div under the right div, i get it under the left div or at the left of the left div.

Here is what i have:

And here is what i want to accomplish:

I have tryied several methods include:

1. clear:left; or clear:both
2. list-style: none;
3. use position:relative;
4. also saw that method but cant figure this out

And another methods that i saw at stackoverflow search but without success.

Here is a live one: JSfiddle

How do i solve this?

/*============================================================================================*/
/* 1. GENERAL TYPOGRAPHY */
/*============================================================================================*/
/*----------------------------------------------*/
/* Global Reset */
/*----------------------------------------------*/ 

body {background:url(../img/body_image_1.png)  top no-repeat}

html, body, div, span, iframe,pre, a, img, strong, center, ul, li, footer, header,menu {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline; }
footer, header, menu {
  display: block;}
body {
  line-height: 1; }
ol, ul {
  list-style: none; }

html { font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; }

img { max-width:100% !important}

/*----------------------------------------------*/
/* General Styles */
/*----------------------------------------------*/
body {
  font-family: 'Copse', Georgia, Times, serif;
  color:#8c8c8c;
  font-size:14px;
  line-height:1.4em;
  position:relative}

.body_wrap {
  width:100%;

  background-position:center 270px;
  background-repeat:no-repeat;
  overflow:hidden;}

::-moz-selection { 
  background: #f67320;
  color: #fff;
  text-shadow: none}

::selection {
  background: #f67320;
  color: #fff;
  text-shadow: none}



/* Typography
======================================================== */
strong { font-weight: bold; }


.sidebar mark {
  background:#ffffff;
  color:#ff8a00 !important;
  display:block;
  padding:5px;
  font-weight:normal;
  font-size:110%;}


/* Links 
======================================================== */
a, a:visited { color: #aa62bb; text-decoration: none; outline:none; }
a:hover, a:focus { color: #f86000; }

/* Lists
======================================================== */
ul { list-style: none outside; }



/*============================================================================================*/
/* 2. SITE STRUCTURE */
/*============================================================================================*/
.main_outer {
  width:1350px;
  margin:0 auto 14px auto;
  position:relative;}

.main_top {
  height:30px}

.main_bot {
  height:66px}

.main_mid {
  padding:0 59px; /* width 496px */
  min-height:670px}


/*----------------------------------------------*/
/* Middle content */
/*----------------------------------------------*/

.content {
  width:100%;
  padding-bottom:17px;
  position:relative;
  z-index:1}

/*----------------------------------------------*/
/* Footer */
/*----------------------------------------------*/
footer {
  width:100%;
  clear:both;
  background:url(../img/opacity_45.png)}

footer .container {	
  min-height:30px;
  padding:40px 0 20px;
  color:#acacac;
  width:496px;
  font-family: 'Source Sans Pro', Tahoma, sans-serif;
  font-size:12px;
  text-align:center;}

.copyright .icon_heart {
  display:inline-block;
  width:16px;
  height:14px;
  overflow:hidden;
  text-indent:-500px;
  margin:0 5px;
  line-height:14px;
  top:0.2em;
  position:relative;}

.copyright {
  line-height:1.3em;
  font-weight:bold;}

.copyright a {
  color:#ccc !important}
.copyright a:hover {
  color:#fff !important}

/*----------------------------------------------*/
/* Custom changes */
/*----------------------------------------------*/

.title {font-family: sans-serif; font-size: 20px; font-weight: bold; color: black; text-align: center; padding-bottom: 25px; padding-top: 15px;}

.titleimg {background-image: url(../img/logo.png); background-repeat: no-repeat; width: 200px; height: 120px; background-position: center;background-size: contain; margin: auto;}

#menu {
  font-family: 'Arimo', sans-serif;
  direction: rtl; text-align: right; float: right;
  width: 250px;
  border-radius: 15px;
  padding: 15px;
  margin-top: 7px;
  border: 7px solid #fbdd63; 
  background-color: white;}

a.link {font-size: 15px; color: black; padding 5px;}
a.link:hover { background-color: #fde499; padding-left: 10px; }

#bookcontent { float: left; }

.frame {width: 300px; height: 320px; position: fixed;  }

.maincontent {font-family: sans-serif; font-size: 16px; color: black; background-color: white; box-shadow: 3px #000;}


/* Content Text */

.fullcontent {   
  direction: rtl;
  border-radius: 15px;
  padding: 15px;
  background-image: url(../img/copity-big.png);
  border: 7px solid #fbdd63; 
  position: fixed;
}

li.first {font-weight: bold; margin-top: 7px; padding-bottom: 2px;}
li.second {list-style-type: square; margin-right: 20px;}

li.third {list-style-type:decimal; margin-right: 20px;}

.bigtitle {font-family: 'Rubik', sans-serif; font-size: 40px; color: black; font-weight: bold; padding-top: 25px;  padding-bottom: 20px; }

.textcontent {font-family: sans-serif; font-size: 18px; color: black; text-align: right; padding-bottom: 20px; }

.boldy {font-weight: bold;}

#copyrighted { clear: both; position: absolute;}

img.desc {width: 350px; height: 250px; float: left; margin-left: 45px; padding-right: 15px;}

.textop { background-image:url(../img/blue.png); width: 180px; height: 50px; float: left; margin-left: -30px; }

.ontop { font-family: sans-serif; font-size: 16px; font-weight: bold; margin-right: 7px; margin-top:13px; color: white; text-shadow: 1px 1px 1px #000;}

.center {margin: 0 auto; padding-top: 15px; padding-bottom: 25px;}

#menu2 {
  display: block;
  font-family: 'Arimo', sans-serif;
  direction: rtl; text-align: right; float: right;
  width: 250px;
  border-radius: 15px;
  padding: 15px;
  margin-top: 7px;
  border: 7px solid #fbdd63; 
  background-color: white;
}

input.buttons {padding: 2px; padding-left: 10px; padding-right: 10px; border: 0px; background-color: #fed40e; color: white;}

.footer {margin: 0 auto; background-image:url(../img/footer.png); width: 750px; height: 180px; margin-top: 30px; }

.footontop-left {width: 590px; font-family: sans-serif; float: left; font-size: 18px; font-weight: bold; margin-right: 7px;  color: black; text-shadow: 1px 1px 1px #fff;}

.footontop-right-cart {auto; background-image:url(../img/icons/cart140x140.png); float: right; width: 140px; height: 140px; margin-right: 7px; margin-top:30px;}

.footontop-right-israel {auto; background-image:url(../img/icons/israel.png); float: right; width: 140px; height: 140px; margin-right: 7px; margin-top:30px;}

.footontop-right-crown {auto; background-image:url(../img/icons/crown.png); float: right; width: 140px; height: 140px; margin-right: 7px; margin-top:30px;}

.karikatura { width: 650px; height: 230px;}

<title>Test</title>
<div class="body_wrap">
  <div class="main_outer">
    <div class="main_top"></div>
    <div class="main_mid">
      <!-- content -->
      <div id="bookcontent">
        <center>
          <div id="content">
            <div id="menu">
              <div class="titleimg"></div>
              <ul>
                <li><a class="link" href="./pages/0.html" target="content">Test 1</a></li>
                <li><a class="link"  href="./pages/1.html" target="content">Test 2</a></li>
                <li><a class="link"  href="./pages/2.html" target="content">Test 3</a></li>
              </ul>
            </div>
            <div id="menu"> This is the iFrame </div>
            <div id="menu2">
              <span align="right"><input class="buttons" type = "button" value = "Previous" /></span>
              <span style="float:left"><input class="buttons" type = "button" value = "Next" /> </span>
            </div>
            <!--/ content -->
          </div>
          <div class="main_bot"></div>
          <!--/ container -->

Answer 1

You can try on menu2:

   float: right;
   clear: both;

here is a working fiddle https://jsfiddle.net/qxLk4afk/2/

Answer 2

Put clear: both in #menu2

#menu2 {
    clear: both;
    display: block;
    font-family: 'Arimo', sans-serif;
    direction: rtl; text-align: right; float: right;
    width: 250px;
    border-radius: 15px;
    padding: 15px;
    margin-top: 7px;
    border: 7px solid #fbdd63; 
    background-color: white;
}