Table column alternatives

Please take a look at my working project, www.fantasysportswiz.com. In the middle of the page, in the second section, there is a list where I want headlines to go. The thing is, I want it divided into two columns, one on the left and one on the right.

How should I do this? I really dont want to use tables, but if thats the only way then I guess I have to.

 

Where you do this,

.rightSideBar {
  width: 13em;
  margin: 2ex 0.75ex 0 0;
  padding: 0;
  float: right;
  clear: right;
  border: 1px solid rgb(216,210,195);
}

[class~="rightSideBar"] {
  margin-right: 1.5ex;
}

Code (markup):

That is an ugly hack, and does not allow for IE fixing the bug. Better is this:

.rightSideBar {
    display: inline; /*this fixes the IE doubled margin bug.  
                       All browsers ignore it, as they should. 
                       It just works.  Hey, it's IE.*/
  width: 13em;
  margin: 2ex 1.5ex 0 0;
  padding: 0;
  float: right;
  clear: right;
  border: 1px solid rgb(216,210,195);
}
/*lose this
[class~="rightSideBar"] {
  margin-right: 1.5ex;
}
*/

Code (markup):

Now, to your problem. Make the margins to #main-copy, like so:

#main-copy {
  color: black;
  background-color: white;
  text-align: justify;
  line-height: 1.5em;
  margin: 0 14.25em 0 12.5em;
  padding: 0.5ex 15em 1em 1em;
  border-left: 1px solid rgb(216,210,195);
}

Code (markup):

(I have no clue why you're using the odd ex measure. Just make it 1em instead of 1.5ex.)

Now you have a new context. You can put columns there the same as you do for the top level columns. Eg..

#who {
    width: 50%;
    float: left;
    }

#what { /*do not give this element any width or height, 
          or IE will screw it up.*/
    margin-left: 50%;
    }
==========
<div id="main-copy">
  <h2>Top Story</h2>
  ...
  <h2>Top Headlines</h2>

  <div id="who">
    <h3>Who's It All About</h3>
    ...
  </div> <!-- end who -->

  <div id="what">
    <h3>What's It All About</h3>
    ...
  </div> <!-- end what -->

  <h2 class="clear">Back to a single column</h2>
  ...
</div> <!-- end main-copy -->

Code (markup):

And that should do it.

cheers,

gary

 

it didnt work
The left side was also on the top and the right side was also on the bottom.

 

Ok, I did this, and now I sort of got it, but I think I have to change some margins and padding, and I dont know what to do. This is what I did:

In style:

.column {
float: left;
width: 50%;
}

Code (markup):

In body:

<div class="column">left column</div>
<div class="column">right column</div>

Code (markup):

 

Everything is fixed, thanks