Search code examples
htmlcssless

How make textbox and button left margin always same by resizing the screen

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="[email protected]" 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: enter image description here

and this is when screen get smaller:

enter image description here

Solution

  • 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