HTML/CSS - 100% DIV not lining up a 30% and 70% Child

I'm trying to understand why this doesn't line up the two INPUT elements side by side.

Thanks for any help you can provide.

<STYLE>

html, body {
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
}
</STYLE>


    &l开发者_StackOverflow社区t;DIV STYLE='width:100%;'>
        <INPUT  TYPE=text  size=10 maxlength=10 
                STYLE='width:70%;'>
        <BUTTON STYLE='width:30%; float:right;'
        >Button</BUTTON>
    </DIV>

---

input{
    display:block;
    float:left;
    margin:0px;
    padding:0px;
    border:none;
}

Click Here

Need to remove extra space, padding, border, margin

---

You did float right. Float both left and it should work out for you. Also note that if they have padding/margin around them 70% + 30% + padding/margin may not fit on one line :)

---

<DIV STYLE='width:100%;'>
        <INPUT  TYPE=text  size=10 maxlength=10 
                STYLE='width:70%;float:left;'>
        <BUTTON STYLE='width:30%; float:left;'
        >Button</BUTTON>
    </DIV>