HTML Structuring layout issue - html

Question

I have some troubles with my html and css structure for this layout on the picture below.
Can you give me some suggestions how to accomplish it properly ? How to separate left section and right section with the form because I want to be able to create this full height black transparent background ?
Here is my code until now.
.enroll-bg { background: linear-gradient( rgba(0, 0, 0, 0.52), rgba(0, 0, 0, 0.52)), url(https://s30.postimg.org/6uy1f1rxd/enroll_bg.jpg) 0 0 no-repeat; background-size: cover; padding: 40px 0 230px 0; width: 100%; }
.form-container { position: relative; }
.form-wrapper { position: absolute; bottom: -230px; right: 0; left: 50%; background: red; width: 539px; height: 520px; }
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<header class="header">
<div class="enroll-bg">
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="enroll-logo">
<div class="logo">
logo
</div>
<!-- logo -->
</div>
<!-- enroll-logo -->
<div class="enroll-content">
<h1>Enroll today and <span>save money & time</span></h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.Com sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
</div>
<!-- enroll-content -->
</div>
<!-- col-md-6 -->
</div>
<!-- row -->
<div class="form-container">
<form action="#" class="form-wrapper">
<div class="form-content">
<p>
<input type="text" id="fname" name="firstname" placeholder="Full Name..." required="required" class="field">
</p>
<p>
<input type="text" id="fname" name="firstname" placeholder="[phone]" required="required" class="field">
</p>
<p>
<input type="email" id="email" name="email" placeholder="Email Address..." required="required" class="field">
</p>
<p>
<input type="email" id="confirm-email" name="confirm-email" placeholder="Confirm Email..." required="required" class="field">
</p>
<p>
<input type="text" id="electric-provider" name="electric-provider" placeholder="Current Electric Provider..." required="required" class="field">
</p>
<p>
<input type="text" id="gas-provider" name="gas-provider" placeholder="Current Gas Provider..." required="required" class="field">
</p>
<div class="form-actions">
<button type="button" class="btn btn-danger">enroll today</button>
</div>
<!-- form-actions -->
</div>
<!-- form-content -->
</form>
<!-- form-wrapper -->
</div>
<!-- form-container -->
</div>
<!-- container -->
</div>
<!-- enroll-bg -->
</header>
<!-- header -->
<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.7/js/bootstrap.min.js"></script>

Answer 1

I've made some minor tweaks to both HTML and CSS - see jsfiddle here.
I've removed position: absolute from the .form-wrapper, wrapped the form in a .col-xs-6, and put in the same .row so that it sits alongside the enroll content.
Each .row can contain any combination of .col-xx-xx or .col-xx-offset-xx, as long as the sum of the numbers is no more than 12. You can read more about this here.
HTML:
<div class="enroll-bg">
<div class="container">
<div class="row">
<div class="col-xs-6">
<div class="enroll-logo">
<div class="logo">
logo
</div>
</div>
<div class="enroll-content">
<h1>Enroll today and <span>save money & time</span></h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.Com sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
</div>
</div>
<div class="col-xs-6 form-container">
<div class="">
<form action="#" class="form-wrapper">
<div class="form-content">
<p>
<input type="text" id="fname" name="firstname" placeholder="Full Name..." required="required" class="field">
</p>
<p>
<input type="text" id="fname" name="firstname" placeholder="[phone]" required="required" class="field">
</p>
<p>
<input type="email" id="email" name="email" placeholder="Email Address..." required="required" class="field">
</p>
<p>
<input type="email" id="confirm-email" name="confirm-email" placeholder="Confirm Email..." required="required" class="field">
</p>
<p>
<input type="text" id="electric-provider" name="electric-provider" placeholder="Current Electric Provider..." required="required" class="field">
</p>
<p>
<input type="text" id="gas-provider" name="gas-provider" placeholder="Current Gas Provider..." required="required" class="field">
</p>
<div class="form-actions">
<button type="button" class="btn btn-danger">enroll today</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
CSS:
.enroll-bg { background: linear-gradient( rgba(0, 0, 0, 0.52), rgba(0, 0, 0, 0.52)), url(https://s30.postimg.org/6uy1f1rxd/enroll_bg.jpg) 0 0 no-repeat;
background-size: cover;
width: 100%; }
.form-container {
height: 100vh;
background: red;
}

Answer 2

Your form must be in the same row as the left column, and in another col-md-6.

Answer 3

if it is for a single page you may not need to use boostrap (class and structure) and relay on the flex model with a few mediaqueries to allow font-size resizing and eventually break into 1 column:
header,
main {
width: 30vw;
min-width: 360px;
height: 100vh;
}
html,
header,
form {
display: flex;
flex-flow: column;
min-height: 100vh;
}
body {
min-height: 100vh;
margin:0;
display: flex;
justify-content: center;
flex-wrap: wrap;
background: linear-gradient(to bottom, #55707B, #677B82, #484926, #685125);
background-size:100% 100%;
color: white;
}
header img {
min-height: 40px;
margin: 1em auto 1em 1em;
}
header h1 {
flex: 1;
display: flex;
flex-flow: column;
justify-content: center;
font-size: 3.5em;
margin: 0;
}
header h1 b {
display: block;
color: #A7FE2B
}
main form {
justify-content: space-around;
align-items: center;
padding: 5vh 3vw;
box-sizing: border-box;
background: rgba(0, 0, 0, 0.25)
}
main form label {
font-size: 5vh;
width: 100%;
position: relative;
}
main form label input:not([type="submit"]) {
width: 100%;
padding-left: 1.5em;
box-sizing: border-box;
}
label:not(:last-of-type):before {
font-family: FontAwesome;
content: "\f007";
position: absolute;
z-index: 1;
left: 0.2em;
top: 0.25em;
color: gray;
}
label:nth-child(2):before {
content: "\f10b";
/* etc ..*/
}
label:last-of-type input {
padding: 0.25em;
color: white;
background: turquoise;
border: none;
}
#media only screen and (max-height: 500px) {
header h1 {
font-size: 20px;
}
main form label {
font-size: 20px;
}
body,
main,
header,
form {
height: auto;
min-height: 100vh
}
}
<link href="//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet"/>
<header>
<img src="http://dummyimage.com/150x40&text=\LOGO/" alt="logo" />
<h1>HTML Ipsum Vestibulum &<b> test me full page too</b></h1>
<p>Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum,
elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui.</p>
</header>
<main>
<form>
<label>
<input placeholder="place holder" />
</label>
<label>
<input placeholder="place holder" />
</label>
<label>
<input placeholder="place holder" />
</label>
<label>
<input placeholder="place holder" />
</label>
<label>
<input placeholder="place holder" />
</label>
<label>
<input placeholder="place holder" />
</label>
<label>
<input type="submit" value="tempus lacus" />
</label>
</form>
</main>
http://codepen.io/gc-nomade/pen/MbBNaO