3 text columns positioning

Hi!

I want to display text in three separate columns on the same horizontal line. As I do not wish text to flow between the columns I have used the following code. If anyone could assist in how to make the third column be aligned (vertically) with the first two I would be very thankful.

The page I am working on is: http://www.sykkelscience.com

I have used the following code in a text/html widget:

<style>

    #columns {
        width: 100%;
    }

    #columns .column {
        position: relative;
        width: 30%;
        padding: 1%;
        font-size: 12px;
    }

    #columns .left {
        float: left;
    }

   #columns .center {
        margin: 0 auto;
    }

    #columns .right {
        float: right;
    }

</style>

<div id="columns">
    <div class="left column">
        <p>Columns in text are a very handy tool.Unfortunately, most designers don't use
        them because they're tedious to implement.</p>
    </div>

<div class="center column">
        <p>Columns in text are a very handy tool. Unfortunately, most designers don't use
        them because they're tedious to implement.</p>
    </div>

    <div class="right column">
        <p>However, if you take the time and effort
        of putting them into use, you'll find 
        that they really add to the aesthetics 
        and functionality of your work.</p>
    </div>
</div>