Homo Pythonicus Homo Pythonicus - 5 months ago 18
CSS Question

Div does not wrap around form

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

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.

Comments