I've written the following code to create a three-column layout where the first and last columns have no left and right margins respectively:

#content {
    background-color:#edeff4;
    margin:0 auto 30px auto;
    padding:0 30px 30px 30px;
    width:900px;
}
    .column {
        float:left;
        margin:0 20px;
    }
    #content .column:nth-child(1) {
        margin-left:0;
    }
    #content .column:nth-child(3) {
        margin-right:0;
    }

The problem is that this code does not work in Internet Explorer 7 and 8? The only pseudo class I can use with IE (in this case) would be "first-child," but this does not eliminate the right margin on the third and last column. Does anyone know of a way I can make this code work on IE 7/8?