title: How to automatically adjust span with its outer div
body: <p>I have an outer div 'draggable', If we write a very big content, it automatically gets expanded, but the span width remains fixed.</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div id="draggable" class="ui-widget-content" style="word-break: keep-all"&gt;
     &lt;span class="too" &gt;
        &lt;div id="symbol" style="POSITION: relative;float:right;"&gt;
           &lt;span class='switch-icons'&gt;-&lt;/span&gt;
           &lt;a id="switch"&gt;&lt;img id="img1" src="images/minus.png" alt="minus" height="15" width="15" &gt;&lt;/a&gt;
           &lt;a  onclick="javascript:closeFullScreenView()"&gt;&lt;img  src="images/close-bt.png" alt="close" height="15" width="15" &gt;&lt;/a&gt;
        &lt;/div&gt;
        &lt;p class="ui-widget-header" style="FLOAT: left"&gt;
           FileNo.:
           &lt;s:property value="fileNo"/&gt;
        &lt;/p&gt;
     &lt;/span&gt;
     &lt;div id="ajaxContent" style="overflow-Y:auto;"&gt;
     &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.too {
      width: auto;
      display: block;
      float: right;
  }
  </code></pre>
  
  <p>The span having class 'too' is not expanding accordingly. I have tried float as well, but its not working.</p>