title: Using CSS3 keyframes to animate divs sliding, but divs pushing other div
body: <p>I am making a sliding nav bar without the use of JavaScript. </p>
  
  <p>Everything is working great except one thing: When the divs get to their final position (at 100% of the keyframe,) the left div pushes the top div to the bottom of the document.</p>
  
  <p>I have tried position: absolute, but that was to no avail. I tried Having left div's width set to 6% and the top divs width set to 94%, but when the user shrinks his or her browser it breaks instantly. </p>
  
  <p>HTML: </p>
  
  <pre><code>&lt;div id="left_bar"&gt;&lt;p&gt;This is sparta!&lt;/p&gt;&lt;/div&gt;
  &lt;div class="top_bar"&gt;This is not Sparta!&lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>/* LEFT SIDEBAR*/
  #left_bar {
  -webkit-animation:myFirst 3s; /* Safari and Chrome */
  -webkit-animation-fill-mode: forwards;
  font-size: .2px;
  padding-left: 5px;
  float: left
  }
  
  
  /* LEFT SIDEBAR ANIMATION*/
  @-webkit-keyframes myFirst /* Safari and Chrome */{
      0% {
          background: orange;
          width: 6%;
          height: 0px;
          margin-top: 100%;
      }
      100% {
          background:orange;
          width: 6%;
          height: 100%;
          opacity: 0.7;
          font-size: 16px;
      }
  }
  /* TOP SIDEBAR*/
  .top_bar {
  background-color: black;
  -webkit-animation:mySecond 3s;
  -webkit-animation-fill-mode: forwards;
  float: right;
  }
  
  /* TOP SIDEBAR ANIMATION*/
  @-webkit-keyframes mySecond /* Safari and Chrome */{
      0% {
          background: orange;
          width: 0%;
          height: 8%;
  
      }
      100% {
          background:orange;
          width: 94%;
          height: 8%;
          opacity: 0.7;
      }
  }
  </code></pre>
  
  <p><a href="http://jsfiddle.net/3Qebp/" rel="nofollow">jsFiddle</a> NOTE: jsFiddle is making it look entirely different. the left sidebar does not take up 100% of the height, but when the top sidebar takes up 94% of the page, it shows the top bar jump underneath the left sidebar.</p>