Woocommerce Question posted in
The official Woocommerce documentation can be found here.

Align DIV horizonatlly with CSS – Woocommerce

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

Tags:

2

Answers


  1. 0

    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. 0

    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