title: Set the div width as per content
body: <p>I need to set the div width as browser default width. This div is containing 'ul' and 'li' elements. I need to increase the div width When 'li' content increases and aslo when browser is minimized this li elements should not go down (happening now) instead browser should provide horizantal bar. Any help?</p>
  
  <p>Div structure is</p>
  
  <pre><code>&lt;div style="position:relative;border:1px solid red; line-height:16px;width:100%"&gt;
      &lt;ul style="position:relative;background:green;height:30px; width:100%;list-style:none; margin:0;"&gt;
          &lt;li style="position:relative; display:inline-block; padding-left:20px; float:left; background:red" &gt;Welcome&lt;/li&gt;
          &lt;li style="position:relative; display:inline-block; padding-left:20px; float:left; background:red" &gt;Welcome&lt;/li&gt;
          &lt;li style="position:relative; display:inline-block; padding-left:20px; float:left; background:red" &gt;Welcome&lt;/li&gt;
          &lt;li style="position:relative; display:inline-block; padding-left:20px; float:left; background:red" &gt;Welcome&lt;/li&gt;
  
      &lt;/ul&gt;
  
  &lt;/div&gt;
  </code></pre>