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浏览过。

Answer 1

问题是最后一个容器：#main，standard只与它的内容一样宽。

尝试使用display：block for #main？

你到底想要做什么？你想做一个灵活的设计吗？

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

1 个答案: