title: responsive CSS divs overlap each other
body: <p>I have this CSS for 2 divs:</p>
  
  <pre><code>#homepage-twitter {
      width:28%;
      height:500px;
      overflow:hidden;
      display:inline;
      float:right;
  }
  #homepage-blog-posts {
      width:70%;
      height:500px;
      display:inline;
      float:left;
      margin-right:10px;
      border-right:1px solid black;
  }
  
  @media screen and (max-width: 1250px) {
      #homepage-blog-posts {
          width:100%;
          border-right:0;
      }
      #homepage-twitter {
          display:block;
          width:100%;
          border:1px solid #F36F25;
      }
  }
  </code></pre>
  
  <p>here is a fiddle with the full html and css code: <em><a href="http://jsfiddle.net/Gb8Fr/" rel="nofollow">http://jsfiddle.net/Gb8Fr/</a></em></p>
  
  <p>if you make the screen as wide a possible, the divs are inline with each other but as the screen gets smaller (using media queries) the divs go one above the other but i can't keep the space in between them and they start to overlap each other</p>
  
  <p>how can i stop them from doing this?</p>