3-columns, with a twist

I want a 3-column layout, but instead of having the content in the middle, i want the content on the far-left. So as you can see on my blog, I want the two existing columns to be the same. I just want to add an additional column to the right (you can see my failed attempt with the “test” text at the bottom of the right column).

The CSS code for the #content and the #menu currently, are:

#content {

float: left;

width: 500px;

margin: 0;

padding: 20px;

background: #ffffff;

}

#menu {

width: 180px;

margin: 0 auto 0 540px;

padding: 10px;

background: #e7fbc8;

text-align: left;

}

I’d like the right-most menu to be #menu-right. I tried just copying and pasting the #menu code and adjusting the left-margin to 740 px, but that didn’t work — as you can see, what happens is that the right-most menu is just pushed to the bottom.

Any suggestions on how to tweak the CSS?