title: How to horizontally sort divs using Sortable in JQuery
body: <p>I am looking to sort my divs horizontally in a container div. <br>
  I found an <a href="http://jqueryui.com/demos/draggable/#sortable" rel="nofollow noreferrer">example</a> on JQuery website but that is vertical sorting. I want it horizontal.</p>
  
  <p>I want to do it sorting in <code>#sortable</code> <code>&lt;div&gt;</code>.</p>
  
  <p>Will you please guide me how can I convert this vertical sorting in horizontal manner.</p>
  
  <h2>CSS</h2>
  
  <pre><code>&lt;style type="text/css"&gt;
      #draggable1 { width: 150px; height: 35px; padding: 0.5em; }
      #draggable2 { width: 150px; height: 35px; padding: 0.5em; }
      #draggable3 { width: 150px; height: 35px; padding: 0.5em; }
  
      #sortable { width: 700px; height: 35px; padding: 0.5em; }
  &lt;/style&gt;
  </code></pre>
  
  <h2>JavaScript</h2>
  
  <pre><code>&lt;script type="text/javascript"&gt;
      $(function() {  
          $("#sortable").sortable({
              revert: true
          }); 
      });
  &lt;/script&gt;
  </code></pre>
  
  <h2>HTML</h2>
  
  <pre><code>&lt;div class="demo"&gt;
      &lt;div id="sortable" class="ui-state-default"&gt;
          &lt;div id = "draggable1" class="ui-state-default"&gt;Home&lt;/div&gt;
          &lt;div id = "draggable2" class="ui-state-default"&gt;Contact Us&lt;/div&gt;
          &lt;div id = "draggable3" class="ui-state-default"&gt;FAQs&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>