title: Simple HTML layout for iPad
body: <p>I am trying to prepare a simple layout design that would work on all devices. I am having issues with iPad at the moment. The whole webpage should not be scrollable, but iPad tries to force and scroll the website outside it's borders ( I think its called overlay scrolling, which give you a smoother feeling ). If the overlay scrolling persists, I do not really have an issue with that, but the main problem is:</p>
  
  <ul>
  <li><p>When I open the webpage and try to scroll the vertically scrollable content (white left content or red right content), the whole webpage scrolls and not the div itself.</p></li>
  <li><p>If I try to swipe to scroll the content, sometimes it works, sometimes the whole webpage scrolls again. It's totally unpredictable. Can someone help me make a plunker example?</p></li>
  </ul>
  
  <p><img src="https://i.stack.imgur.com/Dpv3I.png" alt="A simple layout example"></p>
  
  <p>I think making a separate css file for mobile device will be necessary. Ofcourse we are using bootstrap in the first place.</p>