使文本框/按钮保持在适合不同分辨率的位置？

Question

我有一个DIV，它有一个背景作为我创建的盒子。现在我已经设置了这个DIV以适应不同的分辨率：

#Information {
    margin-left:37%;
    display:block;
    background-image:url(../Images/LoginBox_v2.png);
    background-repeat:no-repeat;
    height:60%;
    width:60%;
    background-size:contain;
    min-width: 400px;
    min-height: 400px;
    max-height: 946px;
    max-width: 946px;
}

然后在那个div中我还有2个DIV标签;一个包含用户名和密码文本框，另一个包含按钮，如下所示：

#UserPass {
    margin-top: 10%;
    position: absolute;
    margin-left: -1%;
}

#Button{
    position: absolute;
    margin-top: 20%;
    margin-left: 10%;
}

如果您需要查看，这是用户名和密码文本框CSS：

#tb_Username {
    width: 100%; 
    min-width: 165px;
    max-width: 850px;
}

#tb_Password {
    width: 100%; 
    min-width: 165px;
    max-width: 485px;
    margin-top: 5%;
}

HTML

<div id="Information">
        <div id="UserPass">
                <asp:TextBox runat="server"  CssClass="inputs" placeholder="Username..." id="tb_Username" Width="485px"/>
                <asp:TextBox runat="server" TextMode="Password" CssClass="inputs" placeholder="Password..." id="tb_Password" Width="485px"/>
        </div>

     <div id="Button">
        <asp:LinkButton runat="server" CssClass="s3d twitter" id="buttonlogin" Text="Login" OnClick="buttonlogin_Click"/>
     </div>
     </div>   

问题是当我测试并缩小网络浏览器时，文本框和按钮不会停留在框DIV标记（信息）中，这就是：

如何让用户和通过文本框变得更小并保持在框中以及使用按钮执行相同操作