Внутренние divs для расширения внешнего div с прокруткой по горизонтали

Question

Как сделать дочерние divs отображать все в одной строке внутри внешнего div и не попадать во вторую строку? Внешняя ширина div должна быть зафиксирована так, чтобы полоса прокрутки была видимой, чтобы мы могли прокручивать, чтобы увидеть все внутренние div.

http://jsfiddle.net/pkbkY/

<style type="text/css"> 
    .child 
    { 
     width: 100px; 
     float: left; 
    } 
</style> 

<div style="width: 500px; overflow: scroll;"> 
    <div class="child"> 
     <table> 
      <tr> 
       <td> 
        a 
       </td> 
      </tr> 
     </table> 
    </div> 
    <div class="child"> 
     <table> 
      <tr> 
       <td> 
        a 
       </td> 
      </tr> 
     </table> 
    </div> 
    <div class="child"> 
     <table> 
      <tr> 
       <td> 
        a 
       </td> 
      </tr> 
     </table> 
    </div> 
    <div class="child"> 
     <table> 
      <tr> 
       <td> 
        a 
       </td> 
      </tr> 
     </table> 
    </div> 
    <div class="child"> 
     <table> 
      <tr> 
       <td> 
        a 
       </td> 
      </tr> 
     </table> 
    </div> 
    <div class="child"> 
     <table> 
      <tr> 
       <td> 
        a 
       </td> 
      </tr> 
     </table> 
    </div> 
</div> 

Answer 1

Здесь вы идете: http://jsfiddle.net/thirtydot/pkbkY/1/

#scroll_container { 
    width: 500px; 
    overflow: scroll; 
    white-space: nowrap; 
} 
.child { 
    width: 100px; 
    display: inline-block; 
    border: 1px solid red; 
} 

Если вам нужны пробелы, пропадут, самым простым решением является удаление пробелов между дочерними элементами: http://jsfiddle.net/thirtydot/pkbkY/2/