Elements that grow away from each other

I have site that I want to look like this:

but instead it looks like this:

this is my 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>

this is my 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;
    tex开发者_如何学Ct-align:center;
}

I feel like this should be easy, but I'm not sure what keywords to search for.

---

Change class .right to float left. That will give you the desired look. To have it center in the page, play with the .main wrapper.

---

They are floating left and right, so that is how they should look.

You could make their parent element much narrower.