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>