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

我有一个简单的问题，我无法弄清楚。看看这个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，标准只有一样宽，它的内容。所以我不得不为它添加固定宽度（px）。我的设计的全部重点是我有浮动的百分比，所以这是一个无赖。添加100％宽度或任何其他数字％，也有自己的问题..

有没有人有我的解决方案？

谢谢！

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

我没有任何微调，;截至目前，我只是为Safari浏览器的HTML。

来源

2011-02-27 Mathijs

问题是最后一个容器：#main，标准只与它所具有的内容一样宽。

尝试使用display：block for #main？

你究竟想在这里做什么？你是否想要做出灵活的设计？

来源

2011-02-27 12:36:46

没有帮助。我想要做的是确实做出灵活的液体设计：当您调整浏览器窗口的大小时，所有元素都会根据浏览器窗口轻轻缩放（就像一张巨大的桌子一样）。而且一切都很好，除了内部的#main div，它不会将自己缩放到其父容器中。 – Mathijs 2011-02-27 13:07:07

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

回答

相关问题