title: styling the ui-state-highlight of jquery sortable lists
body: <p>Using the following strategy, I cannot for the life of me figure out how to set the width of the ui-state-highlight div (defined as ph here, but results are the same when I use ui-state-highlight).  What is illustrated here effectively changes the color, but the width is not respected. </p>
  
  <p>Its a series of two horizontal rows of divs.  I want to move a box without the entire series shifting to the left.  It seems like the placeholder would be the appropriate element to style.  it appears to be, as the color is adopted by the div, but again, the width is not.  </p>
  
  <p>the css..</p>
  
  <pre><code>body {
      font-family:Arial, Helvetica, sans-serif;
      font-size:12px;
  }
  #sortable1{
      border: 1px solid #999;
      min-width: 10px;
      min-height: 30px;
      list-style-type: none;
      margin: 0;
      padding: 5px 0 0 0;
      float: left;
      margin-right: 10px;
  }
  #sortable1 li{
      display:inline;
      margin: 0 5px 5px 5px;
      padding: 5px;
      font-size: 1.2em;
      width: 120px;
  }
  .ph {
      display:block;
      min-height: 1px;
      line-height: 1.2em; 
      background: #ccc;
      width:120px;
  }
  </code></pre>
  
  <p>the html..</p>
  
  <pre><code>&lt;ul id="sortable1" class="connectedSortable"&gt;
      &lt;li class="ui-state-default"&gt;Item 1&lt;/li&gt;
      &lt;li class="ui-state-default"&gt;Item 2&lt;/li&gt;
      &lt;li class="ui-state-default"&gt;Item 3&lt;/li&gt;
      &lt;li class="ui-state-default"&gt;Item 4&lt;/li&gt;
      &lt;li class="ui-state-default"&gt;Item 5&lt;/li&gt;
  &lt;/ul&gt;
  &lt;ul id="sortable1" class="connectedSortable"&gt;
  &lt;/ul&gt;
  &lt;ul id="sortable1" class="connectedSortable"&gt;
      &lt;li class="ui-state-default"&gt;Item 1&lt;/li&gt;
      &lt;li class="ui-state-default"&gt;Item 2&lt;/li&gt;
      &lt;li class="ui-state-default"&gt;Item 3&lt;/li&gt;
      &lt;li class="ui-state-default"&gt;Item 4&lt;/li&gt;
      &lt;li class="ui-state-default"&gt;Item 5&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>and the jquery...</p>
  
  <pre><code> &lt;script&gt;
       $(function() {
           $( ".connectedSortable" ).sortable({
                connectWith: ".connectedSortable",
                placeholder: "ph"
           }).disableSelection();
       });
  &lt;/script&gt;
  </code></pre>