css - 如何使用CSS定位div？

Question

我有大致像这样的 html

<div>
  <div id="header"></div>
  <div id="chart"></div>
  <div id="legend"></div>
  <div id="info1"></div>
  <div id="info2"></div>
  <div id="info3"></div>
</div>

我想这样定位元素:

我到底该怎么做呢？

编辑:这是一个关于“做这件事的正确方法”的问题，它肯定不容易通过 Google 搜索。本质上我想做的不是在 html 中定义列，而是为容器 div 定义高度，然后让其他 div 在其中自然定位。

Answer 1

这里有一些事情可以开始:

HTML

<div id="header"></div>
<div id="left-column">
    <div id="chart"></div>
    <div id="legend"></div>
</div>
<div id="right-column">
    <div id="info1"></div>
    <div id="info2"></div>
    <div id="info3"></div>
</div>
<div class="clear"><!-- --></div>

CSS

#left-column{position:relative;float:left;width:50%;}
#right-column{position:relative;float:right;width:50%;}
.clear{clear:both;}