I'm just trying to float some elements to the right, which are contained within a div. This works fine with the first two elements but when I float the third, they all appear to drop out of the div, with the final element to be float sitting slightly lower than the other two. Below is my code:

```
    <div class="contain"><div class="info"> 
        <button id="button">?</button>
        <input class="sign_up" type="text" name="postcode"/>
        <p class="sign_up">Post Code:</p>
        </div>
        </div>

```

With the css:

```
    <style>
#button  {
    border-radius: 50%;
    border: 1px solid black;
    float: right;
}
.contain    {
    width: 40%;
    border: 1px solid black;
}
p.sign_up   {
    float: right;
}
input.sign_up   {
    float: right;
}

```

Any explanation on why this happens would be appreciated as I'm new to this as im sure you can tell.
Thanks in advance