'grid displaying 2 elements

i have 3 sections in this html 3 page, header, inner body, and footer, i would like you to focus on the inner body only, in there, i have a form, and an information box with title and text, i would like to make the form and information box to be centered in the inner body, and to sit side by side , and the information box to be in the middle of the form height.

body{
    font-family: Verdana, Geneva, Tahoma, sans-serif;

}

.content {
    width: 1400px;
    margin: auto;
    padding: 10px;
}

/* inner body styling */

@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
div.inner-body {
    background-image: url(image/blueimage.png); 
    margin-bottom: 20px;
    margin-top: 20px;
    height: 900px;
    text-align: center;
    align-items: center;
    display: grid;

}



form {
    font-family: Verdana, Geneva, Tahoma, sans-serif;

    margin-top: 80px;
    align-items: center;
    border-radius: 40px;
    width: 525px;
    height: 700px;
    background-color: rgb(99, 198, 223);
    box-shadow: 0px 15px 20px rgba(0,0,0,0.5);
}

.signin {
    font-size: 35px;
    padding: 10px;
    width: 530px ;
    height: 500px;
    display: inline-block;
    background-color: rgb(173, 241, 241);
    border-radius: 30px;
    margin-top: -50px;
    margin: 10px;
    box-shadow: 0px 15px 20px rgba(0,0,0,0.5);
    margin-right: 50px;

}

.signin-intro {

    color: black;
}


.passlabel {
    white-space: pre;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-style: oblique;

}
.stafflabel {
    white-space: pre;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-style: oblique;

}



.field {
    width: 500px;
    font-size: 25px;
    font-style: oblique;
    
}


.error {
    color: red;
    font-size: 15px;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-weight: bold;
}

.error1 {
    color: red;
    font-size: 15px;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}




.userlogo {
    width: 200px;
    border-radius: 100px;
    margin-top: -15px;
}


.area {
    width: 280px;
    height: 30px;
    border-radius: 20px;
    font-size: 20px;
    padding: 5px;
    font-style: oblique;
}

.btn {
    width: 400px;
    height: 40px;
    font-size: 30px;
    border-radius: 20px;
    background-color: rgb(54, 88, 238);
    cursor: pointer;
}

.account-link {
    font-size: 20px;
}


.checkbox {
    display: inline-flex;
    font-size: 20px;
}

.remember {
    white-space: pre;
}


form .pass-link a:hover,
form .account-link a:hover{
  text-decoration: underline;
}

.pass-link {
    white-space: pre;
}


.remember-me {
    width: 20px;
    height: 20px;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="signin.css">
    <script src="signin.js"></script>
    <title>Document</title>
</head>

<body>
    <div class= "content">
        
       <div class="inner-body">
              <div class ="signin">
                  <h3><u>Staff Members Sign In</u></h3>
                  <p class="signin-intro"> This sign in form is meant for staff memebers only, if you are a student, please use this link 
                    <a href="studentaccount.html" title="Student Account">Student Account</a> </p>
              </div>
            <form method="GET" onsubmit=" return formSubmit() " action="#">
                <div class="userimage">
                    <img class="userlogo" src="image/userlogo.png" alt="Picture- User Profile picture">
                </div><br>
                <div class="error" id= "errorMsg"></div><br>
                <div class="error" id= "errorMsg1"></div>
                 <div class="field">
                    <label class="stafflabel">  Staff Name  </label>
                    <input class="area" placeholder="staffmember or admin" onclick=" return userValidation()" onchange=" return userValidation()" id="staff" name="staff" type="text">
                 </div> <br>
                 <div class="error" id= "errorMsg2"></div>
                 <div class="field">
                    <label class="passlabel">   Password    </label>
                    <input class="area" placeholder="password" onclick=" return userValidation()" onchange=" return userValidation()" id="pass" name="pass" type="password">
                 </div><br>
                
                    <div class="checkbox">
                       <input type="checkbox" class="remember-me">
                       <label class="remember" for="remember-me">Remember me        </label>   
                       <a class="pass-link" href="#">  Forgot password?     </a>
                    </div><br><br><br>
                    
                 <div class="field">
                    <input class="btn" type="submit" value="Sign in">
                 </div> <br>
                 <div class="account-link">
                    Didn't create an account yet? <a href="#">Create Account</a>
                 </div>
            </form>
        </div>


      
    
      
    </div>
</body>
</html>
htmlcssgrid


Solution 1:[1]

You can use display: flex; to achieve this easier.

Here is the CodePen: https://codepen.io/Juka99/pen/qBVJdNv

Use flex, remove margin-top, and everything works perfectly. :)

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Dharman

Related Questions