最小化html时网页会崩溃&；css

当我开始最小化窗口时，我的body div在左侧导航栏下崩溃

有人能告诉我我做错了什么或者我还需要做什么吗

非常感谢，谢谢

css代码段：

#navigation {


   float: left;
   min-width: 20%;
   margin: 0;
   margin-top: 5px;
   font-weight: normal;

}

#centerDoc {

   float: left;
   width: 80%;
   padding: 0 0 20px 0; /*top right bottom left*/
   margin-top: 0px;

}


#header{

   position: relative;  
   width:100%;
   height:96px;
   margin-left: 5px;


}



#footer {
        font-family: Trebuchet MS;
        font-size: x-small;
        padding:2px;
        margin:0px;
        background-color:#CBE3F6;
        color:#fff;
        border-bottom: 1px solid #9EC4E2;
        border-top: 1px solid #9EC4E2;
        text-align:center;

        width: 100%;
        }


 #wrapper{


   position: relative;
   margin-left: 5px;


}



#container {
   width: 100%;
   height:100%;
}

页面模板：

<?php require_once 'includes/header.php';?>


<div id="wrapper">

    <?php require_once 'includes/nav.php'; ?>


    <div id="centerDoc">







</div>  <!--centerDoc !-->
 </div> <!-- wrapper !-->



   </div> <!--container !-->




</body>

---

我会将“导航”中的“最小宽度”更改为“最大宽度”。 这样我们可以确保左侧导航栏的宽度不超过页面宽度的20%

编辑：

---

从

#centerDoc

中删除

float

属性，并向其添加

左边距：20%。

然后将

导航中的
最小宽度：20%
更改为
宽度：20%
或
最大宽度：20%
。如果没有此选项，
centerDoc
中的文本将在
#导航
下流动

您可能希望保持测量同步。您在
#centerDoc
中有
宽度：80%
，在
#导航中有
最小宽度
。如果您在这两种情况下都使用纯
宽度
，并将
最小/最大宽度
属性分配给页面的
正文
（因此
#导航
和
#centerDoc
的宽度相对于它们的公共父项），则可能更容易描绘布局


编辑：CSS:

#navigation {
  float: left;
  width:20%;
}
#centerDoc {
  width: 80%;
  margin-left:20%;
}
#header{
  width:100%;
  height:96px;
}
#container { 
  max-width: 1200px;
  min-width: 600px;
}

删除了
#包装器
。请参见
#容器
中的
max-/min width'。当页面宽度小于600像素时，滚动条将显示在浏览器中。页面也不会比1200像素宽。这允许您将
#导航
和
#centerDoc`的宽度定义为百分比

使用下面的HTML，一切都应该正常工作。（虽然我不知道
nav.php
里面有什么。希望没有什么能清除
导航的浮动）


示例文本。示例文本。示例文本。示例文本。示例文本

示例文本。示例文本。示例文本。示例文本。示例文本。示例文本

您是否尝试过将#centerDoc上的“float:left”更改为“float:right”？您好，谢谢。我刚刚剥离了所有内容，正在尝试以下操作，但现在我的
#centerDoc
从
#navigation
下开始，这有什么特别的原因吗？下面是我现在正在尝试的：
#导航{float:left；max width:100px；}#中心文档{width:800px；}#标题{width:900px；height:96px；}#包装{width:900px；}#容器{width:900px；}
@greenhoodlum上述代码应能正常工作。您是否在
#导航
中或
#centerDoc
上方有clearfloat？没有，但我设法修复了它：）我被告知最好使用%而不是像素来匹配任何屏幕-这是真的吗？如果您想在调整浏览器大小时调整页面大小，使用百分比是更好的选择窗户。（否则页面总是X像素宽。）最好将
max-
和
min width
s定义为
#容器
的像素，将普通
宽度
s定义为
#导航
和
#centerDoc
的百分比。（同时在
#centerDoc
中添加一个
左边距
。我将在一分钟内更新我的答案…）
#navigation {
  float: left;
  width:20%;
}
#centerDoc {
  width: 80%;
  margin-left:20%;
}
#header{
  width:100%;
  height:96px;
}
#container { 
  max-width: 1200px;
  min-width: 600px;
}

<div id="container">
  <?php //require_once 'includes/header.php';?>

<div id="navigation">
  <?php //require_once 'includes/nav.php'; ?>
  <p>Sample text. Sample text. Sample text. Sample text. Sample text.</p>
</div>  <!--navigation !-->

<div id="centerDoc">
  <p>Sample text. Sample text. Sample text. Sample text. Sample text. Sample text.</p>
</div>  <!--centerDoc !-->
</div> <!--container !-->