title: css float: left clash/collision, how to avoid?
body: <p>I am trying to use <a href="https://github.com/bradbirdsall/Swipe/tree/swipe2" rel="nofollow noreferrer">Swipe JS 2</a> with jQuery Mobile (carefully taking into consideration the notes <a href="https://github.com/bradbirdsall/Swipe/issues/16" rel="nofollow noreferrer">here</a>).</p>
  <p>However, I find there is a problem with a clash of trying to use <strong>float: left</strong>. I can not interfere with the Swipe JS 2 references so the swipe motion on touch devices will work.</p>
  <p>What this means is that the data that should be displayed in a grid, just gets displayed in a vertical column.</p>
  <p>When examining the inspector for the CSS that should set the display to the grid I see the following:
  <img src="https://i.stack.imgur.com/IewiE.png" alt="enter image description here" /></p>
  <p><strong>Note, it seems that inorder to see the slide motion it is only possible to do this on a touch device (mobile, tablet, etc).</strong></p>
  <p>When you run the following, the swipe motion <strong>works</strong>, but the data <strong>does not</strong> display in a grid (code on jsfiddle: <a href="http://jsfiddle.net/u1sonderzug/YSGY3/" rel="nofollow noreferrer">http://jsfiddle.net/u1sonderzug/YSGY3/</a>, preview on jsfiddle: <a href="http://jsfiddle.net/u1sonderzug/YSGY3/embedded/result/" rel="nofollow noreferrer">http://jsfiddle.net/u1sonderzug/YSGY3/embedded/result/</a>):</p>
  <pre><code>&lt;html&gt;
      &lt;head&gt;
          &lt;title&gt;Test Slide&lt;/title&gt;
          &lt;script type='text/javascript' src='http://code.jquery.com/jquery-1.7.1.js'&gt;&lt;/script&gt;
          &lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css&quot;&gt;
          &lt;script type='text/javascript' src=&quot;http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js&quot;&gt;&lt;/script&gt;
          &lt;script type='text/javascript' src=&quot;https://raw.github.com/bradbirdsall/Swipe/swipe2/swipe.js&quot;&gt;&lt;/script&gt;
          &lt;style type='text/css'&gt;
          /* Product CSS */
            
              .product {
              padding-top:10px;
              padding-bottom:10px;
              padding-left:24px;
              padding-right:24px;
              float:left;
          }
          /* Swipe 2 required styles */
          
              .swipe {
              overflow: hidden;
              visibility: hidden;
          }
          .swipe-wrap {
              overflow: hidden;
              position: relative;
          }
          .swipe-wrap div {
              float:left;
              width:100%;
              position: relative;
          }
          &lt;/style&gt;
          &lt;script type='text/javascript'&gt;
              $('#home').live('pageshow',function(){
                  window.slider = new Swipe(document.getElementById('slider'));
              });
          &lt;/script&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;div data-role=&quot;page&quot; id=&quot;home&quot;&gt;
            &lt;div data-role=&quot;content&quot;&gt;
              &lt;!-- Take out the FOLLOWING two lines to display grid correctly --&gt;
              &lt;div id='slider' class='swipe'&gt;
                &lt;div class='swipe-wrap'&gt;
                  &lt;!-- Take out the ABOVE two lines to display grid correctly --&gt;
                  &lt;div&gt;
                    &lt;div class=&quot;product&quot;&gt;&lt;img src=&quot;http://upload.wikimedia.org/wikipedia/commons/thumb/6/62/NCI_Visuals_Food_Hamburger.jpg/220px-NCI_Visuals_Food_Hamburger.jpg&quot; /&gt;&lt;/div&gt;
                    &lt;div class=&quot;product&quot;&gt;&lt;img src=&quot;http://upload.wikimedia.org/wikipedia/commons/thumb/6/62/NCI_Visuals_Food_Hamburger.jpg/220px-NCI_Visuals_Food_Hamburger.jpg&quot; /&gt;&lt;/div&gt;
                    &lt;div class=&quot;product&quot;&gt;&lt;img src=&quot;http://upload.wikimedia.org/wikipedia/commons/thumb/6/62/NCI_Visuals_Food_Hamburger.jpg/220px-NCI_Visuals_Food_Hamburger.jpg&quot; /&gt;&lt;/div&gt;
                    &lt;div class=&quot;product&quot;&gt;&lt;img src=&quot;http://upload.wikimedia.org/wikipedia/commons/thumb/6/62/NCI_Visuals_Food_Hamburger.jpg/220px-NCI_Visuals_Food_Hamburger.jpg&quot; /&gt;&lt;/div&gt;
                    &lt;div class=&quot;product&quot;&gt;&lt;img src=&quot;http://upload.wikimedia.org/wikipedia/commons/thumb/6/62/NCI_Visuals_Food_Hamburger.jpg/220px-NCI_Visuals_Food_Hamburger.jpg&quot; /&gt;&lt;/div&gt;
                    &lt;div class=&quot;product&quot;&gt;&lt;img src=&quot;http://upload.wikimedia.org/wikipedia/commons/thumb/6/62/NCI_Visuals_Food_Hamburger.jpg/220px-NCI_Visuals_Food_Hamburger.jpg&quot; /&gt;&lt;/div&gt;
                    &lt;div class=&quot;product&quot;&gt;&lt;img src=&quot;http://upload.wikimedia.org/wikipedia/commons/thumb/6/62/NCI_Visuals_Food_Hamburger.jpg/220px-NCI_Visuals_Food_Hamburger.jpg&quot; /&gt;&lt;/div&gt;
                    &lt;div class=&quot;product&quot;&gt;&lt;img src=&quot;http://upload.wikimedia.org/wikipedia/commons/thumb/6/62/NCI_Visuals_Food_Hamburger.jpg/220px-NCI_Visuals_Food_Hamburger.jpg&quot; /&gt;&lt;/div&gt;
                    &lt;div class=&quot;product&quot;&gt;&lt;img src=&quot;http://upload.wikimedia.org/wikipedia/commons/thumb/6/62/NCI_Visuals_Food_Hamburger.jpg/220px-NCI_Visuals_Food_Hamburger.jpg&quot; /&gt;&lt;/div&gt;
                    &lt;div class=&quot;product&quot;&gt;&lt;img src=&quot;http://upload.wikimedia.org/wikipedia/commons/thumb/6/62/NCI_Visuals_Food_Hamburger.jpg/220px-NCI_Visuals_Food_Hamburger.jpg&quot; /&gt;&lt;/div&gt;
                    &lt;div class=&quot;product&quot;&gt;&lt;img src=&quot;http://upload.wikimedia.org/wikipedia/commons/thumb/6/62/NCI_Visuals_Food_Hamburger.jpg/220px-NCI_Visuals_Food_Hamburger.jpg&quot; /&gt;&lt;/div&gt;
                    &lt;div class=&quot;product&quot;&gt;&lt;img src=&quot;http://upload.wikimedia.org/wikipedia/commons/thumb/6/62/NCI_Visuals_Food_Hamburger.jpg/220px-NCI_Visuals_Food_Hamburger.jpg&quot; /&gt;&lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div&gt;&lt;span&gt;&lt;h1&gt;This is the next page&lt;/h1&gt;&lt;/span&gt;&lt;/div&gt;
                  &lt;!-- Take out the FOLLOWING two lines to display grid correctly --&gt;
                &lt;/div&gt;
              &lt;/div&gt;
              &lt;!-- Take out the ABOVE two lines to display grid correctly --&gt;
            &lt;/div&gt; 
          &lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p>​</p>
  <p>When you run the following, the swipe motion <strong>does not work</strong>, but the data <strong>does</strong> display in a grid (code on jsfiddle: <a href="http://jsfiddle.net/u1sonderzug/JZQQY/" rel="nofollow noreferrer">http://jsfiddle.net/u1sonderzug/JZQQY/</a>, preview on jsfiddle: <a href="http://jsfiddle.net/u1sonderzug/JZQQY/embedded/result/" rel="nofollow noreferrer">http://jsfiddle.net/u1sonderzug/JZQQY/embedded/result/</a>):</p>
  <pre><code>&lt;html&gt;
      &lt;head&gt;
          &lt;title&gt;Test Slide&lt;/title&gt;
          &lt;script type='text/javascript' src='http://code.jquery.com/jquery-1.7.1.js'&gt;&lt;/script&gt;
          &lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css&quot;&gt;
          &lt;script type='text/javascript' src=&quot;http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js&quot;&gt;&lt;/script&gt;
          &lt;script type='text/javascript' src=&quot;https://raw.github.com/bradbirdsall/Swipe/swipe2/swipe.js&quot;&gt;&lt;/script&gt;
          &lt;style type='text/css'&gt;
          /* Product CSS */
            
              .product {
              padding-top:10px;
              padding-bottom:10px;
              padding-left:24px;
              padding-right:24px;
              float:left;
          }
          /* Swipe 2 required styles */
          
              .swipe {
              overflow: hidden;
              visibility: hidden;
          }
          .swipe-wrap {
              overflow: hidden;
              position: relative;
          }
          .swipe-wrap div {
              float:left;
              width:100%;
              position: relative;
          }
          &lt;/style&gt;
          &lt;script type='text/javascript'&gt;
              $('#home').live('pageshow',function(){
                  window.slider = new Swipe(document.getElementById('slider'));
              });
          &lt;/script&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;div data-role=&quot;page&quot; id=&quot;home&quot;&gt;
            &lt;div data-role=&quot;content&quot;&gt;
             
                  &lt;div&gt;
                    &lt;div class=&quot;product&quot;&gt;&lt;img src=&quot;http://upload.wikimedia.org/wikipedia/commons/thumb/6/62/NCI_Visuals_Food_Hamburger.jpg/220px-NCI_Visuals_Food_Hamburger.jpg&quot; /&gt;&lt;/div&gt;
                    &lt;div class=&quot;product&quot;&gt;&lt;img src=&quot;http://upload.wikimedia.org/wikipedia/commons/thumb/6/62/NCI_Visuals_Food_Hamburger.jpg/220px-NCI_Visuals_Food_Hamburger.jpg&quot; /&gt;&lt;/div&gt;
                    &lt;div class=&quot;product&quot;&gt;&lt;img src=&quot;http://upload.wikimedia.org/wikipedia/commons/thumb/6/62/NCI_Visuals_Food_Hamburger.jpg/220px-NCI_Visuals_Food_Hamburger.jpg&quot; /&gt;&lt;/div&gt;
                    &lt;div class=&quot;product&quot;&gt;&lt;img src=&quot;http://upload.wikimedia.org/wikipedia/commons/thumb/6/62/NCI_Visuals_Food_Hamburger.jpg/220px-NCI_Visuals_Food_Hamburger.jpg&quot; /&gt;&lt;/div&gt;
                    &lt;div class=&quot;product&quot;&gt;&lt;img src=&quot;http://upload.wikimedia.org/wikipedia/commons/thumb/6/62/NCI_Visuals_Food_Hamburger.jpg/220px-NCI_Visuals_Food_Hamburger.jpg&quot; /&gt;&lt;/div&gt;
                    &lt;div class=&quot;product&quot;&gt;&lt;img src=&quot;http://upload.wikimedia.org/wikipedia/commons/thumb/6/62/NCI_Visuals_Food_Hamburger.jpg/220px-NCI_Visuals_Food_Hamburger.jpg&quot; /&gt;&lt;/div&gt;
                    &lt;div class=&quot;product&quot;&gt;&lt;img src=&quot;http://upload.wikimedia.org/wikipedia/commons/thumb/6/62/NCI_Visuals_Food_Hamburger.jpg/220px-NCI_Visuals_Food_Hamburger.jpg&quot; /&gt;&lt;/div&gt;
                    &lt;div class=&quot;product&quot;&gt;&lt;img src=&quot;http://upload.wikimedia.org/wikipedia/commons/thumb/6/62/NCI_Visuals_Food_Hamburger.jpg/220px-NCI_Visuals_Food_Hamburger.jpg&quot; /&gt;&lt;/div&gt;
                    &lt;div class=&quot;product&quot;&gt;&lt;img src=&quot;http://upload.wikimedia.org/wikipedia/commons/thumb/6/62/NCI_Visuals_Food_Hamburger.jpg/220px-NCI_Visuals_Food_Hamburger.jpg&quot; /&gt;&lt;/div&gt;
                    &lt;div class=&quot;product&quot;&gt;&lt;img src=&quot;http://upload.wikimedia.org/wikipedia/commons/thumb/6/62/NCI_Visuals_Food_Hamburger.jpg/220px-NCI_Visuals_Food_Hamburger.jpg&quot; /&gt;&lt;/div&gt;
                    &lt;div class=&quot;product&quot;&gt;&lt;img src=&quot;http://upload.wikimedia.org/wikipedia/commons/thumb/6/62/NCI_Visuals_Food_Hamburger.jpg/220px-NCI_Visuals_Food_Hamburger.jpg&quot; /&gt;&lt;/div&gt;
                    &lt;div class=&quot;product&quot;&gt;&lt;img src=&quot;http://upload.wikimedia.org/wikipedia/commons/thumb/6/62/NCI_Visuals_Food_Hamburger.jpg/220px-NCI_Visuals_Food_Hamburger.jpg&quot; /&gt;&lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div&gt;&lt;span&gt;&lt;h1&gt;This is the next page&lt;/h1&gt;&lt;/span&gt;&lt;/div&gt;
                 
            &lt;/div&gt; 
          &lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p>​</p>