如何使用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>

我想定位这样的元素:

我是怎么做到这一点的？

编辑:这是一个关于"正确的方法"的问题,它肯定不容易谷歌.基本上我想要做的,而不是在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;}