title: make div larger than container
body: <p>with the code below I am trying make "ThumbNails" as large as the contet (dynamic) requires and show (only) an horizontal scrollbar if not fitting in the contining div but I am failing.
  What am I doing wrong?</p>
  
  <p>html:</p>
  
  <pre><code>&lt;body&gt;
   &lt;div id="Fascione"&gt;&lt;/div&gt;
   &lt;div id="Wrapper"&gt;
    &lt;div id="Menu"&gt;&lt;/div&gt;
    &lt;div id="Contenuto"&gt;
     &lt;div id="VariableImg"&gt;&lt;/div&gt;
     &lt;div id="Back"&gt;&lt;/div&gt;
     &lt;div id="Next"&gt;&lt;/div&gt;
     &lt;div id="ThumbNails"&gt;
      &lt;img&gt;&lt;img&gt;&lt;img&gt;
     &lt;/div&gt;
    &lt;/div&gt;
   &lt;/div&gt;
   &lt;div id="Footer"&gt;&lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>css:</p>
  
  <pre><code>body{width:1024px; margin:0px auto;}
  div#Fascione{width:inherit;min-height:125px;border-bottom:2px solid black;}
  div#Wrapper{width:inherit;padding:8px 0px 4px 0px;}
  div#Wrapper{width:inherit;padding:8px 0px 4px 0px;}
  div#Menu{float:left;width:200px;}
  div#Contenuto{overflow:hidden;margin-left:208px;}
  div#Back, div#Next{width:49%;cursor:pointer;text-align:center;margin:1% auto;border:1px dotted #1111cc;background-color:#ffffff;}
  div#Back{float:left;}
  div#Next{float:right;}
  div#Back:hover, div#Next:hover{border:1px solid #1111cc;}
  div#ThumbNails{clear:both;max-height:180px;overflow-x:auto;overflow-y:hidden;background-color:#f0f0f0;}
  div#Footer{clear:left;width:inherit;} /* clear left needed in combination with the overflow:hidden of Contenuto */
  </code></pre>
  
  <p><strong>Edited</strong>: removed old, invalid link.</p>