Float 2 columns e.g .col but remove margin from 1 of them?

If I have a container that is 820px wide and I want to float 2 columns within this with the styles below then how can I remove the margin from the second column?

<style>
#container{
width: 820px;
}

.col{
float: left;
width: 400px;
margin-right: 20px;
}
</style>开发者_JS百科;

You could use .col:last-child but browser support isn't as good as :first-child (:last-child is a CSS3 selector).

So try this...

.col {
    float: left;
    width: 400px;
}

.col:first-child {
    margin-right: 20px;
}

.col{
float: left;
width: 200px;
}

.col:first-child
{
       margin-right: 20px;
}