How can I make a CSS border line

Question

How can I establish a height property for the border-right (of the left section with social buttons)? I created this modal window using the grid.

Here is snippet of my html code:

    <form class="form">
        <div class="head">
            <h1>Log in to the Site</h1>
            <a href="#"><i class="fas fa-times"></i></a>
         </div>
    <div class="main">
        <div class="left">
            <button class="facebook">
                <i class="fab fa-facebook-f"></i>
                Log in with Facebook
            </button>
            <button class="google">
                <i class="fab fa-google-plus-g"></i>
                Log in with Google +
            </button>
        </div>
        <div class="right">
           <span class="wrap">
                <label for="login"> Login</label>
                <input type="text" name="login" class="login">
            </span>
            <span class="wrap">
                <label for="password">Password  </label>
                <input type="password" name="password" class="password">
            </span>
            <br>
            <span class="check-box">
                <label for="checkbox">Remember me</label>
                <input type="checkbox" name="checkbox" class="checkbox" checked>
            </span>
            <div>
              <button class="log-btn">Log in</button>
              <a href="#">Need help logging in?</a>
            </div>
        </div>
    </div>
        <div class="footer">
            <p>Don't have an account yet? <a href="#">Sign up</a></p>
        </div>
  </form>

Here my scss code. I thought to add padding property to main section but it didn't make sense.

    .main {
        background: $light-grey-color;
        display: grid;
        width: 100%;
        grid-template-columns: 1fr 1fr;
        font-size: 14px;
        font-weight: bold;

      .left {
        padding: 40px 58px;
        border-right: 1px solid $grey-color;

        .facebook {
            background: #3e5b96;
            margin-bottom: 20px;
            padding: 10px 45px 10px 50px;
        }
        .google {
            background: $red-color;
        }

        button {
            display: flex;
            font-weight: bold;
            display: inline-block;
            vertical-align: middle;
            padding: 0;
            margin: 0;
            border: none;
            border-radius: 3px;
            white-space: nowrap;
            user-select: none;
            text-decoration: none;
            color: #fff;
            font-size: 14px;


            position: relative;
            padding: 10px 50px;

             i {
              position: absolute;
              left: 5px;
              top: 0;
              padding: 0 0 0 5px;
              height: 100%;
              box-sizing: border-box;


              display: flex;
              align-items: center;
        }
    }
    }
          .right {
        padding: 40px 58px;

       .wrap {
        display: block;
        margin-bottom: 20px;

         .login {
            width: 100%;
         }

         .password {
            width: 100%;
         }

         label {
            display: block;
            margin-bottom: 5px;
         }
       }
        .check-box {
            display:  inline-block;

            .checkbox {
                float: left;
            }
        }
        div {
            display: flex;
            margin-top: 24px;
            justify-content: space-between;
                    align-items: center;

            .log-btn {
                background: #252525;
                border: none;
                display: inline-block;
                vertical-align: middle;

                  white-space: nowrap;
                  user-select: none;
                  font-family: 'Open sans';

                  font-weight: bold;
                  text-decoration: none;
                  color: #fff;
                  padding: 14px 30px;
            }
            a {
                color: #000;
            }

        }
      }
    }

I have used to create it using border property but I need to make it shorter (as on image)

https://stackoverflow.com/questions/3148415/how-to-make-a-vertical-line-in-html — Paulie_D, Aug 20 '18 at 12:18

score 0 · Answer 1 · answered Aug 20 '18 at 12:24

0

you can put another div between left and right with following property

.middle {
    background-color : #ccc;
    width : 2px;
    height : 150px;
    margin-top : 15px;
    display : inline-block;
}

answered Aug 20 '18 at 12:24

Nayan Patel

61
4

score 0 · Answer 2 · edited Aug 20 '18 at 12:57

Put form tag as relative and form.form:before as position: absolute

  .main {
    background: $light-grey-color;
    display: grid;
    width: 100%;
    grid-template-columns: 1fr 1fr;
    font-size: 14px;
    font-weight: bold;
      .left {
        padding: 40px 58px;
        border-right: 1px solid $grey-color;
        .facebook {
          background: #3e5b96;
          margin-bottom: 20px;
          padding: 10px 45px 10px 50px;
        }
        .google {
          background: $red-color;
        }
        button {
          display: flex;
          font-weight: bold;
          display: inline-block;
          vertical-align: middle;
          padding: 0;
          margin: 0;
          border: none;
          border-radius: 3px;
          white-space: nowrap;
          user-select: none;
          text-decoration: none;
          color: #fff;
          font-size: 14px;
          position: relative;
          padding: 10px 50px;
          i {
            position: absolute;
            left: 5px;
            top: 0;
            padding: 0 0 0 5px;
            height: 100%;
            box-sizing: border-box;
            display: flex;
            align-items: center;
          }
        }
      }
      .right {
        padding: 40px 58px;
        .wrap {
          display: block;
          margin-bottom: 20px;
          .login {
            width: 100%;
          }
          .password {
            width: 100%;
          }
          label {
            display: block;
            margin-bottom: 5px;
         }
       }
       .check-box {
         display: inline-block;
           .checkbox {
             float: left;
           }
         }
         div {
           display: flex;
           margin-top: 24px;
           justify-content: space-between;
           align-items: center;
           .log-btn {
             background: #252525;
             border: none;
             display: inline-block;
             vertical-align: middle;
             white-space: nowrap;
             user-select: none;
             font-family: 'Open sans';
             font-weight: bold;
             text-decoration: none;
             color: #fff;
             padding: 14px 30px;
            }
            a {
              color: #000;
            }
          }
       }
     }
     form.form{
       position: relative;
     }
     form.form:before {
       position: absolute;
       border-left: 1px solid #000;
       content: "";
       margin-left: 49%;
       top: 0;
       bottom: 0;
     }

 <form class="form">
   <div class="head">
    <h1>Log in to the Site</h1>
    <a href="#"><i class="fas fa-times"></i></a>
  </div>
  <div class="main">
    <div class="left">
      <button class="facebook">
        <i class="fab fa-facebook-f"></i>
        Log in with Facebook
      </button>
      <button class="google">
        <i class="fab fa-google-plus-g"></i>
        Log in with Google +
      </button>
    </div>
    <div class="right">
      <span class="wrap">
        <label for="login"> Login</label>
        <input type="text" name="login" class="login">
      </span>
      <span class="wrap">
        <label for="password">Password  </label>
        <input type="password" name="password" class="password">
      </span>
      <br>
      <span class="check-box">
        <label for="checkbox">Remember me</label>
        <input type="checkbox" name="checkbox" class="checkbox" checked>
      </span>
      <div>
        <button class="log-btn">Log in</button>
        <a href="#">Need help logging in?</a>
      </div>
    </div>
  </div>
  <div class="footer">
    <p>Don't have an account yet? <a href="#">Sign up</a></p>
  </div>
</form>

score 0 · Answer 3 · answered Aug 20 '18 at 12:29

Add a positioned pseudo-element to the .main div

.main {
  display: grid;
  grid-template-columns: 1fr 1fr;
  font-size: 14px;
  font-weight: bold;
  position: relative;
  margin: 1em auto;
  grid-column-gap: 1em;
}

.main::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  height: 50%;
  /* adjust as required */
  width: 2px;
  /* adjust as required */
  transform: translate(-50%, -50%);
  background: red;
}

.main div {
  height: 75vh;
  background: lightblue;
}

<div class="main">
  <div></div>
  <div></div>
</div>

How can I make a CSS border line

3 Answers3