百分比容器内的百分比浮动容器

Question

我有一个简单的问题，我无法弄清楚。看这段html代码：

    <div id="container">
    <div id="content">
        <div id="menu">
            <ul>
                <li><a href="#" class="active">pagina's</a></li>
                <li><a href="#">home</a></li>
                <li><a href="#">kamers</a></li>
                <li><a href="#">over ons</a></li>
            </ul>
        </div>
        <div class="clearfloats"></div>
        <div id="cmscontent">
            <div id="sidebar">
                <ul>
                    <li><a href="#" class="overzicht active">overzicht van de pagina's</a></li>
                    <li class="last"><a href="#" class="toevoegen">pagina toevoegen</a></li>
                </ul>
            </div>
            <div id="main">
                <h1 class="maintitle">
                    overzicht van de pagina's
                </h1>
                <div id="maincontent">
                    sdfsd
                </div>
            </div>
            <div class="clearfloats"></div>
        </div>
    </div>
</div>

CSS：

#container {
width: 84%;
margin: 0 auto;
}

#content {
margin-top: 50px;
min-width: 1140px;
}

#cmscontent {
background-color: #ffffff;
border: 1px solid #e0e0e0;
padding: 44px 30px 44px 30px;
position: relative;
z-index: 3;
}

#sidebar{
padding: 14px 24px 14px 24px;
width: 306px;
background-color: #f8f8f8;
float: left;
}

#main {
float: left;
margin-left: 80px;
width: 100%;
}

问题在于最后一个容器：#main,standard 仅与它所拥有的内容一样宽。所以我不得不为其添加一个固定的宽度（px）。我设计的重点是我有浮动的百分比 div，所以这很糟糕。在 % 中添加 100% 宽度或任何其他数字，也有其自身的问题..

有人可以帮我解决吗？

谢谢！

http://www.mathijsdelva.be/cms/

我没有微调任何东西；目前我只是为 Safari 编写了 html。

Answer 1

问题在于最后一个容器：#main,standard 仅与它所拥有的内容一样宽。

尝试使用 display: block for #main 吗？

您实际上想在这里做什么？您是否正在尝试进行灵活的设计？