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

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 吗？

你到底想在这里做什么？你想做出灵活的设计吗？