Aligning 2 items in the same line within a div

Question

I have the following HTML and CSS. I am trying to have the IMG and then the BUTTON in the same line one next to the other. But they keep coming out one on top of the other.

<div class="cartAddingButton">
    <img class="cartIcon" src="../BG/cartIcon1.png">
    <form name="cartAdding" action="../cart/cartAdding.php" method="post">
    <input type="button" value="<?php echo $lang['ADDTOCART']; ?>" class="addToCart" onclick="addtocart(<?php echo $itemId; ?>)" />
    </form>
</div>

CSS:

.cartAddingButton {
text-align: right;
vertical-align: middle;
display: inline-block;

}
.cartIcon {
float: right; }
.addToCart {
float: right; }

Answer 1

That's because the button is within a <form> which is simply a block-level element .. you can try changing the display value of the form to display: inline-block; though remember that its width will only be as wide as its content, just like elements in the inline-formatting context .

form {
display: inline-block;
}

jsFiddle