I'm trying to make a checkerboard pattern using `nth-child`, but it isn't working the way I expected it to.

In the example below, I want to set every other `p` at opposite sides of the `div` to create a checkerboard pattern. The `p` are set to `width:50%;`, and the `div` is set at `width:100%`.

I've set up a [jsfiddle](http://jsfiddle.net/L9ng7/) to demonstrate:

HTML

```
<div id='check'>
  <p>Odd</p>
</div>

<div id='check'>
  <p>Even</p>
</div>

```

CSS

```
#check { 
  float:left; 
  width: 100%;
}
#check p {  
  width: 50%;
  background: #DDD;
}

#check p:nth-child(odd) {
  float:right;
}

```

Can someone make me see how to make this work?