title: overflow:hidden with variable 100% width
body: <p>I have some side by side lists in a container div.
  The container div needs to be a width of 100%.</p>
  
  <p>Any lists within the container should overflow out of the window should they exceed the browser width.</p>
  
  <p>The only way I can get this to work as desired is if I give my container a fixed px width.</p>
  
  <p>I'm stuck and I'm sure it's something simple.</p>
  
  <p>Please see: <a href="http://jsfiddle.net/sPKEp/7/" rel="nofollow">http://jsfiddle.net/sPKEp/7/</a></p>
  
  <pre><code>.small-list {
  background-color:#797979;
  display:block;
  width:640px; /* &lt;-- This at 640px behaves correct. I need this to be 100% though */
  height:81px;
  max-height:81px;
  margin:0px;
  padding:0px;
  }
  ul {
  display:block;
  float:left;
  overflow:hidden;
  height:81px;
  max-height:81px;
  width: 100px;
  list-style-type: none;
  padding: 0px;
  margin: 0 5px 0 5px;
  background-color:#c9c9c9;
  }
  li {
  display:block;
  padding:0px;
  width: 100px;
  height: 25px;
  background-color:#2b2b2b;
  border:1px solid #fff;
  line-height:1em;
  }
  </code></pre>