skip to Main Content

I am struggling to align 2 DIVs horizontally with CSS in my [Website], basically the Log in DIV is a bit higher than the Register DIV[1] [![Problem with 2 DIVs][2]][2]

CSS where I need help:

.woocommerce-form.woocommerce-form-login.login {
    width: 50%;
    float: left;
}    

.woocommerce form.register {
    border: 1px solid #d3ced2;
    padding: 20px;
    margin: 2em 0;
    text-align: left;
    border-radius: 5px;
    width: 50%;
    float: right;
}

What am I missing here?
Thank you for your help!
[1]: https://localchain.co.uk/my-account/
[2]: https://i.stack.imgur.com/ReVr6.jpg

2

Answers


  1. I suspect that it is because of margin property which you only have at register div.

     margin: 2em 0;
    

    If you remove that, both will be at the same starting distance.

    Login or Signup to reply.
  2. With below CSS settings, the login and register section will be aligned.

    .u-column1.col-1,
    .u-column2.col-2 {
        float: left;
        width: 50%;
    }
    
    .woocommerce-form.woocommerce-form-login.login {
        /* width: 50%; */
        /* float: left; */
    }
    
    .woocommerce form.checkout_coupon, .woocommerce form.login, .woocommerce form.register {
        border: 1px solid #d3ced2;
        padding: 20px;
        margin: 2em 0;
        text-align: left;
        border-radius: 5px;
        width: 100%;
        /* float: right; */
    }
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search