title: Why are the <div> of different height?
body: <p>I am a newbie to web-designing. I made a simple webpage <a href="http://jsbin.com/qopelumo" rel="nofollow">DEMO</a> with a form on the left and learning resources on the right (displayed using <code>jQuery</code>). Here is my markup:  </p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;title&gt;Membership Form&lt;/title&gt;
      &lt;style&gt;
          td {
              padding: 8px;
              background-color: #ffffff;
          }
  
          table {
              font-family: verdana,arial,sans-serif;
              font-size:14px;
              color:#333333;
          }
  
          h3{
              font-family: verdana,arial,sans-serif;
              text-align:center;
              color: #808080;
          }
  
          input[type=text], textarea, input[type=radio] {
              -webkit-transition: all 0.30s ease-in-out;
              -moz-transition: all 0.30s ease-in-out;
              -ms-transition: all 0.30s ease-in-out;
              -o-transition: all 0.30s ease-in-out;
              outline: none;
              font-family: verdana,arial,sans-serif;
              padding: 3px 0px 3px 3px;
              border: 1px solid #DDDDDD;
          }
  
          input[type=text]:focus, textarea:focus, input[type=radio]:focus {
              box-shadow: 0 0 5px rgba(81, 203, 238, 1);
              font-family: verdana,arial,sans-serif;
              padding: 3px 0px 3px 3px;
              border: 1px solid rgba(81, 203, 238, 1);
          }
  
          input[type=submit], input[type=reset] {
              padding: 14px 26px;
              font-size: 14px;
              line-height: 100%;
              vertical-align: middle;
              text-align: center;
              cursor: pointer;
              transition: background 0.1s ease-in-out;
              -webkit-transition: background 0.1s ease-in-out;
              -moz-transition: background 0.1s ease-in-out;
              -ms-transition: background 0.1s ease-in-out;
              -o-transition: background 0.1s ease-in-out;
              color: #808080;
              font-family: verdana,arial,sans-serif;
          }
  
          div{
              border : solid;
              border-width : 1px;
              width : 45%;
              height : 75%;
              border-style : dashed;
              border-color : #808080;
              padding : 5px;
          }
  
          #form{
              float : left;
          }
  
          #siteloader{
              float : right;
          }
  
          object {
              width: 100%;
              height : 75%;
          } 
  
  
      &lt;/style&gt;
      &lt;body&gt;
          &lt;h3&gt; Membership Form&lt;/h3&gt;
          &lt;!-- TABLE inside FORM, always --&gt;
          &lt;!-- FORM contacts a CGI (Common Gateway Interface) which echos the submitted data --&gt;
          &lt;div id = "form"&gt;
              &lt;form method = "post" action = "http://www.cs.tut.fi/cgi-bin/run/~jkorpela/echo.cgi"&gt;
              &lt;table&gt;
                      &lt;tr&gt;
                          &lt;td&gt;First Name:&lt;/td&gt;
                          &lt;td&gt;
                              &lt;input type="text" size=50 placeholder="First Name" name="fName" required="true"&gt;
                          &lt;/td&gt;
                      &lt;/tr&gt;
                      &lt;tr&gt;
                          &lt;td&gt;Last Name:&lt;/td&gt;
                          &lt;td&gt;
                              &lt;input type="text" size=50 placeholder="Last Name" name="lName" required="true"&gt;
                          &lt;/td&gt;
                      &lt;/tr&gt;
                      &lt;tr&gt;
                          &lt;td&gt;Gender:&lt;/td&gt;
                          &lt;td&gt;
                              &lt;input type="radio" name="gender" value="male" required="true"&gt;Male&lt;/input&gt;
                              &lt;input type="radio" name="gender" value="female"&gt;Female&lt;/input&gt;
                          &lt;/td&gt;
                      &lt;/tr&gt;
                      &lt;tr&gt;
                          &lt;td&gt;Address:&lt;/td&gt;
                          &lt;td&gt;
                              &lt;textarea rows=10 cols=50 name="address" placeholder="Address" required="true"&gt;&lt;/textarea&gt;
                          &lt;/td&gt;
                      &lt;/tr&gt;
                      &lt;tr&gt;
                          &lt;td&gt;Email:&lt;/td&gt;
                          &lt;td&gt;
                              &lt;input type="text" size=50 placeholder="Email" name="email" required="true"&gt;
                          &lt;/td&gt;
                      &lt;/tr&gt;
                      &lt;tr&gt;
                          &lt;td&gt;Contact:&lt;/td&gt;
                          &lt;td&gt;
                              &lt;input type="text" size=50 placeholder="Residence" name="residence" required="true"&gt; &lt;br&gt;
                              &lt;input type="text" size=50 placeholder="Mobile" name="mobile" required="true"&gt;
                          &lt;/td&gt;
                      &lt;/tr&gt;
              &lt;/table&gt;
              &lt;center&gt;
                  &lt;input type="submit" value="Submit"&gt;&lt;/input&gt;
                  &lt;input type="reset" value="Reset"&gt;&lt;/input&gt;
              &lt;center&gt;
              &lt;/form&gt;
          &lt;/div&gt;
          &lt;div id = "siteloader"&gt;
          &lt;/div&gt;
      &lt;/body&gt;
  
      &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script&gt;
          $(document).ready(function(){
              $("#siteloader").html('&lt;object data="http://www.w3schools.com/html/html5_form_attributes.asp"/&gt;');
          });
      &lt;/script&gt;
  &lt;/html&gt;   
  </code></pre>
  
  <p>I have a couple of problems:  </p>
  
  <ol>
  <li>The <code>&lt;div&gt;</code> are of different height even when I state in CSS that they should both be 75%. <strong>How can they both be made to have the same height?</strong>  </li>
  <li>Upon clicking a link on the right, the browser opens a new page, leaving the page I made. <strong>How can I ensure that the browsing happens without leaving my page?</strong>    </li>
  </ol>