Prevent inline-block divs from wrapping

[nakkaş]

http://jsfiddle.net/UnNbW/I want the divs to wrap their content. And stay in their origionally associated line. Essentially without wrapping.see the jsfiddle. Basically, the tables are stacking below each other, when it cant stay on screen. I would rather they become hidden off screen.Ive tried adding overflow: hidden; to the style, for the main layout. I do not want to fix a width for each div. It needs to fit content in.please feel free to change classes / add classes.CSS\[code\].layout { -moz-border-radius: 15px; border-radius: 15px; vertical-align: top; display: inline-block;}.layoutbacking{ -moz-border-radius: 15px; border-radius: 15px; padding: 5px; margin: 5px; background: #CCCCCC;}\[/code\]HTML:\[code\]<div class="layout" style="background: #222222; width: 100%; overflow:hidden"> <div> <div class="layout layoutbacking" > <table> <tr> <th> header 1 </th> <th> header 2 </th> <th> header 3 </th> <th> header 4 </th> </tr> <tr> <td> data 1 </td> <td> data 2 </td> <td> data 3 </td> <td> data 4 </td> </tr> <tr> <td> data 1 </td> <td> data 2 </td> <td> data 3 </td> <td> data 4 </td> </tr> <tr> <td> data 1 </td> <td> data 2 </td> <td> data 3 </td> <td> data 4 </td> </tr> </table> </div> <div class="layout" > <div class="layout layoutbacking"> <table> <tr> <th> header 1 </th> <th> header 2 </th> <th> header 3 </th> <th> header 4 </th> </tr> <tr> <td> data 1 </td> <td> data 2 </td> <td> data 3 </td> <td> data 4 </td> </tr> </table> </div> <br /> <div class="layout layoutbacking"> <table> <tr> <th> header 1 </th> <th> header 2 </th> <th> header 3 </th> <th> header 4 </th> </tr> <tr> <td> data 1 </td> <td> data 2 </td> <td> data 3 </td> <td> data 4 </td> </tr> </table> </div> </div> </div> <div> <div class="layout layoutbacking"> <table> <tr> <th> header 1 </th> <th> header 2 </th> <th> header 3 </th> <th> header 4 </th> </tr> <tr> <td> data 1 </td> <td> data 2 </td> <td> data 3 </td> <td> data 4 </td> </tr> </table> </div> <div class="layout layoutbacking" > <table> <tr> <th> header 1 </th> <th> header 2 </th> <th> header 3 </th> <th> header 4 </th> </tr> <tr> <td> data 1 </td> <td> data 2 </td> <td> data 3 </td> <td> data 4 </td> </tr> </table> </div>\[/code\]