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.