0

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

4castle
  • 32,613
  • 11
  • 69
  • 106
Ivan Vegner
  • 1,707
  • 4
  • 14
  • 23
  • You are required to place an example portion of the code here that shows the problem. Third party sites can change or disappear tomorrow helping no one in the future. – Rob Jun 28 '16 at 18:54
  • what is the purpose of top:50% on ''fully-centered'' div ? – vbotio Jun 28 '16 at 18:55
  • using this solves the issue, just take out the other stuff .fully-centered { position: relative; } – Keith Jun 28 '16 at 18:56
  • this transform: translateY(50%); is broking you. – vbotio Jun 28 '16 at 18:58
  • The `top:50%` and the transform are there to vertically center the contents. – Ivan Vegner Jun 28 '16 at 18:58
  • Using `translateY` will only translate that specific element and not the parent container. Instead, try `padding-top: 50%` or `margin-top: 50%` – jtmingus Jun 28 '16 at 18:58

1 Answers1

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.

vbotio
  • 1,566
  • 3
  • 26
  • 53