title: Cannot set pixel width of div using css width attibute
body: <p>I'm trying to set up a div which contains 4 divs. I want to set the width of the container and some of the contained divs to set values but they just seem to take the width of the content.</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
      &lt;style&gt;
  div {
      border: 1px solid #888;
  }
  
  .container {
      width: 300px;
      position: relative;
  }
  
  .container div {
      display: inline;
      }
  
  .div1 {
      width: 20px;
      overflow: hidden;
  }
  .div2 {
      width: 80px;
      overflow: hidden;
  }
  .div3 {
      width: 160px;
      overflow: hidden;
  }
  .div4 {
      width: 20px;
      overflow: hidden;
      position: absolute;
      top:0px;
      right: 0px;
  }
      &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;div class="container"&gt;
      &lt;div class="div1"&gt;&lt;img src="1x1.gif" width="1" height="1"/&gt;&lt;/div&gt;
      &lt;div class="div2"&gt;&lt;span&gt;date&lt;/span&gt;&lt;/div&gt;
      &lt;div class="div3"&gt;&lt;span&gt;text&lt;/span&gt;&lt;/div&gt;
      &lt;div class="div4"&gt;&lt;span&gt;twistie&lt;/span&gt;&lt;/div&gt;    
  &lt;/div&gt;    
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>The result looks like this:</p>
  
  <pre><code>+--+----+----+------------------------+---+
  |  |date|text|                        |twi|
  +--+----+----+------------------------+---+
  </code></pre>
  
  <p>Can anyone explain why the left-hand divs are not being set to the required widths?</p>