Currently, I am still in the process of finalizing the remainder of the page, but I have encountered a minor issue. The problem lies in my image div not matching the height of the container. Although the image itself is the correct size, the image div appears slightly smaller.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div id="container">
<div id="image">
<img src="halie-west-25xggax4bSA-unsplash.jpg" alt="leaves and trees">
</div>
<div id="form">
<fieldset id="info">
<h1>Let's do this!</h1>
<div class="row">
<div class="column">
<label for="first-name">First Name</label>
<input type="text" required id="first-name">
</div>
<div class="column">
<label for="last-name">Last Name</label>
<input type="text" id="last-name">
</div>
</div>
<div class="row">
<div class="column">
<label for="email">Email</label>
<input required type="email" id="email">
</div>
<div class="column">
<label for="phone-number">Phone Number</label>
<input type="number" required id="phone-number">
</div>
</div>
<div class="row">
<div class="column">
<label for="password">Password</label>
<input type="password" required id="password">
</div>
<div class="column">
<label for="confirm-password">Confirm Password</label>
<input type="password" required id="confirm-password">
</div>
</div>
</fieldset>
<div id="submit-button">
<button id="submit" type="submit" method="post">Submit</button>
</div>
</div>
</div>
</body>
</html>
In addition to that, here is my CSS:
body {
padding: 0;
margin: 0;
width: 100%;
height: 100%;
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}
#form {
position: absolute;
display:inline-block;
width: 100%;
}
#info {
width: 100%;
border: none;
box-shadow: 0 20px 20px -20px black;
}
.row {
display: flex;
justify-content: left;
}
#info h1{
text-align: left;
}
.column{
margin:10px;
}
.column label{
display: block;
text-align: left;
padding:5px;
}
#info input{
align-items: end;
}
#submit{
height: 3rem;
width:12rem;
margin: 3rem 0 0 3rem;
display:flex;
justify-content: center;
align-items: center;
}
#image{
position: relative;
width: 35%;
height: 100vh;
display: inline-block;
}
#image img{
width: 100%;
height: 100vh;
object-fit: cover;
}
#container{
display: inline-block;
align-items: center;
justify-content: left;
height: 100%;
}
I'm attempting to resolve this issue before continuing with the login page since it will appear inconsistent during completion. I've attempted using chatgpt and conducted thorough searches without success. Due to my limited front-end experience, this small complication is perplexing. I believe finding a solution should be relatively straightforward.