title: Splitting the page in two sections
body: <p><img src="https://i.stack.imgur.com/kBs8a.jpg" alt="What I am trying to achieve">I have a facebook app and I am working on the front-end now. I am just getting started with css and html, so this might be a silly question- sorry for that.
  What I am trying to do is to divide the page in two sections. I've created two <code>div</code>s for that, but the problem is the way they are positioned. My code is the following:</p>
  
  <pre><code>&lt;style&gt;
  .choose_div{
    width: 20%;
    height: auto;
    padding: 1px;
    left: 0px;
    border: 2px;
  }
  .frame_div{
    right:0px;
    height: auto;
    width: 80%;
    border: 2px 2px 2px 2px;
    position: relative;
  }
  &lt;/style&gt;
    &lt;div id="choose_div"&gt;
      &lt;ul&gt;
        &lt;li class="li_choose"&gt;
          &lt;div class="li_div"&gt;
            &lt;p&gt;Save&lt;/p&gt;
              &lt;img src="arrow.jpg" id="arrow_save" style="width:10%;height:10%"&gt;
             &lt;hr&gt;
          &lt;/div&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
  &lt;div id="frame_div"&gt;
    &lt;iframe id="frame_opened"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I thought that <code>right:0px;</code> for one and <code>left:0px;</code>for the other would position them properly, but they are just one at the bottom of the other.<br>
  Can anyone please help with this?</p>