我有一个div容器id=middle，该容器在此代码的页面中居中：
header, #middle, footer {
margin-left: auto;
margin-right: auto;
}
在名为div的{{1}}内，有middle和nav部分。
main的作用类似于div和nav的容器，因此将main左侧和nav对齐应该更容易正确，同时保持他们的中心。
我尝试通过以下代码进行此类对齐：
main它有效，但我必须指定#middle {
width: 849px;
height: 600px; /*I wanto to set this to auto or get rid of it*/
}
nav {
width: 200px;
float: left;
}
main {
width: 649px;
float: right;
}
的高度，它不会自动适应到其内容的高度，弄乱所有其余的布局。在我的网站中，主页和导航的高度因页面而异。
我该如何解决这个问题？我不想为#middle指定固定的高度，而是希望#middle根据#middle和main之间的最大高度来改变其高度。
我不知道它是否有用但CSS代码的结尾是：
nav这是我页面的HTML代码：
footer {
width: 849px;
height: 50px;
}
N.B。 <!DOCTYPE html>
<html>
<head>
</head>
<body>
<header>
...
</header>
<div id="middle">
<nav>
...
</nav>
<main>
...
</main>
</div>
<footer>
...
</footer>
</body>
</html>
和nav是语义html5标记，类似于main
答案 0 :(得分：1)
在<div>之后添加clear: both; </main>。然后您可以删除#middle