How make textbook and button left margin always same by resizing the screen? This is my CSS code:
.forgot-password-textbox {
font-size: @textbox-font-size;
border-radius: @textbox-border-radius;
border: @border-lines solid @Black;
padding: @padding-40 / 4;
width: @forgot-password-textbox-width;
box-shadow: 0 1px @Grey;
margin-bottom: @forgot-password-textbox-margin-bottom;
position:relative;
}
.forgot-password-button {
margin-left: @forgot-password-textbox-button-margin-left;
margin-top: auto;
width: 40%;
height: 45px;
position:relative;
}
and this is my HTML:
<div>
<div>Email Address</div>
<div><input type="email" name="email" placeholder="example@email.com" id="email" class="forgot-password-textbox"></div>
<div>
<label id="Message" class="forgot-password-error-message"></label>
</div>
<div>
<input type="button" value="Submit" id="btn-reset-password" onclick="resetPasswordHandler()" class="orange-button forgot-password-button">
</div>
</div>
I need the Email text box and Submit button to right align with all page sizes.
This is how I see the page with regular screen:
and this is when screen get smaller:
You can do box-sizing: border-box;
on the input field, and then have the submit button use margin-left: auto
. So long as both are display: block;
, it should work.
Here is the JSBin for proof of concept: http://jsbin.com/helosub/1/edit?css,output