Question

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>

Answer 1

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;
}