Search code examples
cssdynamic-css

css div overflow and dynamic horizontal size

I have a web page that shows lots of tabular data and each of these tables needs to be placed on one horizontal line. I have mocked up an example below:

<html>
<style>
  .outer{width:300px;height:300px;overflow: scroll;}
  .inner{white-space: nowrap;}
  .inline{float: left;}
</style>
<body>
<div class="outer">
    <div class="inner">
        <div class="inline"><table><tr><td>stuff</td></tr></table></div>
        <div class="inline"><table><tr><td>stuff</td></tr></table></div>
        <div class="inline"><table><tr><td>stuff</td></tr></table></div>
        <div class="inline"><table><tr><td>stuff</td></tr></table></div>
        <div class="inline"><table><tr><td>stuff</td></tr></table></div>
        <div class="inline"><table><tr><td>stuff</td></tr></table></div>
        <div class="inline"><table><tr><td>stuff</td></tr></table></div>
        <div class="inline"><table><tr><td>stuff</td></tr></table></div>
        <div class="inline"><table><tr><td>stuff</td></tr></table></div>
    </div>
</div>
</body>
</html>

I am having problems that the inner div wraps the table divs unless I set it to have a large width such as 4000px. Is there a nice way of keeping all of the tables inline even if they exceed the size of the outer div with just css?

Solution

  • Change .inline{float: left;} to .inline{display:inline-block;}

    http://jsfiddle.net/QLe5r/