CSS布局问题 - 需要100％宽度的2 divs截图和小提琴包括在内

Question

我试图在不使用表的情况下创建新的母版页，这让我很头疼。

它几乎就在那里，我只需要将'Messages'和'Content'div设为全宽，这样'Menu'div，加上'Messages'和'Content'div是相同的宽度（100％的屏幕）作为'顶级'div。

我已经设置了一个jsFiddle，有人可以给我一些指示吗？

http://i.stack.imgur.com/d1HO5.png

http://jsfiddle.net/CJRv5/

我很乐意改变HTML，但必须考虑以下因素：

菜单宽130px，其余内容必须填充剩余窗口宽度 - 没有960网格！

Answer 1

最简单（非直观）的方式，只需更改

    #divMasterSubContainer
    {
        float: left;
        ...

到

    #divMasterSubContainer
    {
       overflow:hidden;
       ...

http://jsfiddle.net/CJRv5/2/ 参考http://www.stubbornella.org/content/2009/07/23/overflow-a-secret-benefit/

Answer 2

^您需要确保菜单的宽度+消息/内容的宽度不超过它们所在容器的宽度。做这样的事情

div { border: 0; margin: 0; padding: 0;{

#content { 
    width: 100%;
}
.clear-both { clear: both; }
.float-left { float: left; }
#menu { width: 20%; }
#main { width: 80%; }

<div id="content">
    <div id="menu" class="float-left">
        <p>menu</p>
    </div>
    <div id="main" class="float-left">
        <div id="message"><p>messages</p></div>
        <div id="content"><p>content</p></div>
    </div>
    <div class="clear-both"></div>
</div>