html - 部分小于内容

Question

我在 MVC razor 中获得的默认布局页面有一个问题，即 section 标签小于其内容。问题是我里面有一张大 table ，它用完了这个部分，而不是这个部分只是变得足够宽以适应它。我在 jsFiddle 中重现了这个问题。你可以看到蓝色盒子比红色盒子薄很多。蓝色部分是窗口的初始大小，但如果向右滚动，则会看到表格比该部分宽。

如何使该部分加宽以匹配其内容的大小？

<div class="page">        
    <section id="main" style="background:blue;height:50px">
       <table style="width:1000px; overflow:auto;background:red">
           <tr><td>lkjlkjlkjlkjjhgjhgjhgjgjhgjhg</td></tr>

        </table>
    </section>
    <footer>
    </footer>
</div>

http://jsfiddle.net/sDG8n/1/

Answer 1

将部分 float 到左侧

<section id="main" style="float:left;background:blue;height:50px">