Div does not wrap around form [duplicate] - html

Question

This question already has answers here:
Floating elements within a div, floats outside of div. Why?
(11 answers)
Closed 6 years ago.
I have a div which I'm trying to fill with a background color. It contains a form. However, the div, and therefore the color, doesn't wrap around the form. How do I fix this?
#signUpForEarlyAccess {
float: right;
background-color: #F8F8F8;
}
.fully-centered {
position: relative;
top: 50%;
transform: translateY(50%);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-xs-6" style="background-color: grey">
Irrelevant div
</div>
<div class="col-xs-6 text-center" id="signUpForEarlyAccess">
<div class="fully-centered">
<h3 contenteditable="true">Sign Up for Early Access</h3>
<h5>Enter your email to be one of the first to try!</h5>
<div class="form-group input-group">
<input id="emailForm" placeholder="Please enter an email address" type="email" class="form-control">
<span class="input-group-btn">
<button type="submit" class="btn btn-success">Sign up</button>
</span>
</div>
</div>
JSFiddle

Answer 1

https://jsfiddle.net/02uLtz0w/2/
I think you want something like this
#signUpForEarlyAccess {
float: right;
background-color: #F8F8F8;
border:1px solid red;
display:flex;
align-items:center;
justify-content:center;
align-content:center;
height:250px;
}
this height is just to show you that it is vertically centered ok ? Modify it as you wish.