title: Can I "override" the width of an HTML element with CSS?
body: <p>I'm doing some work with CSS, and I have an <code>&lt;li&gt;</code> element with a <code>&lt;div&gt;</code> element inside of it. The <code>&lt;div&gt;</code> element assumes the width of the enclosing <code>&lt;li&gt;</code> element, but the text content inside the <code>&lt;div&gt;</code> is wider than the <code>&lt;li&gt;</code> (and therefore goes onto two lines). What I want to do is make the <code>&lt;div&gt;</code> the same width as its longest text element, does anyone know how I can do this? Thanks.</p>
  
  <pre><code>&lt;ul style="display: inline-block; list-item-style: none"&gt;
    &lt;li id="foo" style="float: left; list-style-type: none; position: relative;"&gt;
      &lt;a href="..."&gt;brief text&lt;/a&gt;
      &lt;div id="bar" style="position: absolute; width=???"&gt;
        &lt;ul&gt;
          &lt;li&gt;a long chunk of text&lt;/li&gt;
          &lt;li&gt;an even longer piece of text&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
    &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>Right now, the width of <code>div#bar</code> is equal to 100% of the width of its enclosing element, <code>li#foo</code>, and the width of <code>li#foo</code> is equal to the width of the text in its <code>&lt;a&gt;</code> tag (plus padding and borders). What I want to do is make <code>div#bar</code> be the width of <code>&lt;li&gt;an even longer piece of text&lt;/li&gt;</code>, but I can't figure out how to accomplish that, even with Javascript.... or am I going to be forced to use an absolute measurement for the width? Any advice would be greatly appreciated.</p>