彼此成长的元素

Question

我的网站我希望看起来像这样：

但它看起来像这样：

这是我的HTML：

<div id="wrap">
  <div class="left"> 
    <div class="leftPoints">
      <b>Supporting Points, text area, etc</b>
    </div>
  </div>

  <div class="right">
    <div class="rightPoints">
      <b>Contesting Points, text area, etc</b>
    </div>
  </div>

  <div id="footer">
       blah blah
  </div>
</div>

这是我的css：

#wrap
{
    width: 1000px;
    margin: 0 auto;
}

.left
{
    float: left;
    width: 500px;
}

.leftPoints
{
    float: right;
    text-align: right;
}

.right
{
    float: right;
    width: 500 px;
}

.rightPoints
{
    float: left;
    text-align: left;
}

#footer
{
    clear: both;
    margin: 0 auto;
    text-align:center;
}

我觉得这应该很简单，但我不确定要搜索哪些关键字。

Answer 1

它们左右浮动，这就是它们的外观。

你可以让他们的父元素更窄。

Answer 2

将班级.right改为向左浮动。这会给你想要的外观。要让它在页面中居，请使用.main包装器。