Currently, I have a div with the class of "signup-login-forms" that is set to have a height of 40vh and span 100% of the browser width. Inside this div are two forms positioned next to each other. The goal is to have both forms fill the entire height of the "signup-login-forms" div. This layout functions as expected in FireFox and Chrome, however, Safari (specifically version 7.0.6) doesn't display the forms at full height; instead, they only expand to fit their content. I've attempted several solutions including setting min-height to 100%, changing height to auto, and removing box-sizing:border-box without success. Included below is my source code for reference. Any assistance would be greatly appreciated!
I've experimented with the following: 1. Changing to min-height: 100% 2. Setting height: auto 3. Removing box-sizing: border-box
Here's the HTML structure:
<div id="signup-login-forms">
<form id="signup-form" name="signup-form" method="POST" action="#">
<header>
<h2>Create account</h2>
</header>
<fieldset>
<input type="email" id="userEmail" name="userEmail" required="required" placeholder="email">
<input type="email" id="confirmUserEmail" name="confirmUserEmail" required="required" placeholder="confirm email">
<input type="password" id="confirmPassword" name="confirmPassword" required="required" placeholder="create password">
<small>
<p>By signing up, you agree to our <a href="---">terms and conditions</a>.</p>
</small>
<button class="form-button" id="signup-button" type="submit" formmethod="#" formaction="#">Sign up</button>
</fieldset>
</form>
<form id="login-form" name="login-form" method="POST" action="#">
<header>
<h2>Log-in</h2>
</header>
<fieldset>
<input type="email" id="userEmail" name="userEmail" required="required" placeholder="email">
<input type="password" id="password" name="password" required="required" placeholder="password">
<div id="checkbox">
<input type="checkbox" name="loginPreference" id="loginPreference"><label>Keep me logged in</label>
</div>
<button class="form-button" id="login-button" type="submit" formmethod="#" formaction="#">Log-in</button>
</fieldset>
</form>
</div>Corresponding CSS styles:
#signup-login-forms {
width: 100%;
height: 40vh;
background-color: #161618;
margin: 4em 0 0 0;
text-align: center;
}
#signup-login-forms form {
height: 100%;
width: 50%;
text-align: center;
}
#signup-form {
float: left;
border-right: 1px solid rgb(53, 53, 53);
box-sizing: border-box;
}
#login-form {
float: right;
box-sizing: border-box;
}
#signup-login-forms form header {
width: 100%;
padding: 5% 0 0 0;
text-align: center;
}
#signup-login-forms header h2 {
color: #e74c3c;
font-weight: normal;
font-size: 2em;
display: inline;
}
#signup-login-forms fieldset {
width: 100%;
}