使用CSS定位DIV元素

Question

假设我有以下的DIV：

<div id="top">Page header</div>
<div id="main">Main content</div>
<div id="sidebar">Sidebar content</div>
<div id="bottom">Page footer</div>

如何使用CSS将侧边栏DIV放置在主DIV的右侧，并将其设置为总宽度的20％？

我还想在四个DIV之间留出一些边距，以使布局不显得过于拥挤。

希望它能在“所有”浏览器中都能正常工作，包括该死的IE6 ...

- ObiWanKenobi

Answer 1

将主要内容和侧边栏放在包装器中，您可以设置包装器的大小/位置，并保留您的布局。

#top {
  /* top stuff */
}
#wrapper {
  width: 800px;
  margin: 0px auto; /* centers on page */
}
#main {
  float: left;
  width: 80%;
  margin-right: 10px;
}
#sidebar {
  float: left; /* by floating left here you have a greater control over the margin */
  width: 20%;
}
#bottom {
  /* bottom stuff */
}

- Robert Greiner

Answer 2

尝试：

html, body, div { margin: 0; padding: 0; border: 0 none; } /* primitive reset CSS */
#main { float: left; width: 80%; }
#sidebar { float: right; width: 20%; }
#bottom { clear: both; }

对于这种情况，使用重置CSS（还有其他的）非常重要，因为不同的浏览器对于边框、外边距和内边距等默认值是不同的。

- cletus

Answer 3

<div id="top">Page header</div>
<div id="main">
    <div id="content">Main content</div>
    <div id="sidebar">Sidebar content</div>
</div>
<div id="bottom">Page footer</div>


#top, #main, #bottom { float: left; clear: both; width: 100%; margin-bottom: 1em; }
#sidebar { float: right; width: 20%; }
#content { float: right; }

- Chris Doggett

Answer 4

使用 float、负 margin 和 padding。

你可以在 http://alistapart.com 找到关于页面布局的好教程（我真的推荐看看 圣杯布局），它还涉及很多跨浏览器问题。

http://www.alistapart.com/articles/holygrail

- knittl

Answer 5

非常非常重要的是，您将文档类型设置为严格，就像这样：

如果你这样做，就不需要清除你的CSS（有一些例外），而可以直接使用正确的盒模型。

- John Lewis

Answer 6

我将回答自己的问题，并附上这篇文章的链接，这正是我所寻找的：

http://www.456bereastreet.com/lab/developing_with_web_standards/csslayout/2-col/

- ObiWanKenobi