CSS Floated divs appearing below parent div - css

Question

I'm trying to style a contact form based on this codepen and am having issues with the floated form going below its parent div instead of inside it. I have tried adding a clearfix with no luck. I've also messed around with the overflow a bit also with no luck. CSS is not my strong suit and I'm doing this in rails which complicates things so I'm pretty sure it's just something stupid that I'm missing. The generated HTML and my CSS is below and here is a fiddle where you can see what it's doing. I want the whole form to be in the white part, not below it. Thank you for any help you can provide!
HTML
<div id="contact">
<div id="contact-header">Contact Me</div>
<div id="form-main">
<div id="form-div">
<form accept-charset="UTF-8" action="/contacts" class="new_contact" id="new_contact" method="post">
<div style="display:none">
<input name="utf8" type="hidden" value="✓" />
<input name="authenticity_token" type="hidden" value="EoDahqxZMOLK9RYj8VfIO3lNh4EuGIcUZFv2+aWPj4Q=" />
</div>
<p class="name">
<input class="validate[required,custom[onlyLetter],length[0,100]] feedback-input" id="contact_name" name="contact[name]" placeholder="Name" type="text" />
</p>
<p class="email">
<input class="validate[required,custom[email]] feedback-input" id="contact_email" name="contact[email]" placeholder="Email" type="text" />
</p>
<p class="text">
<textarea class="validate[required,length[6,300]] feedback-input" id="contact_message" name="contact[message]" placeholder="Message"></textarea>
</p>
<div class="submit">
<input id="button-blue" name="commit" type="submit" value="SEND" />
</div>
</form>
</div>
</div>
</div>
<!--contact-->
CSS
#contact {
background-color: white;
}
#contact-header{
text-align:center;
font-size: 40px;
color: #FAF8F2;
padding-top: 30px;
}
#form-main{
width:100%;
float:left;
padding-top:0px;
}
#form-div {
background-color:#F0B49E;
padding: 35px 35px 50px 35px;
width: 450px;
float: left;
left: 50%;
position: absolute;
margin-top:30px;
margin-left: -260px;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
}
.feedback-input {
color:#3c3c3c;
font-family: "PT Sans", Helvetica, Arial, sans-serif;
font-weight:500;
font-size: 18px;
border-radius: 0;
line-height: 22px;
background-color: #FAF8F2;
padding: 13px 13px 13px 13px;
margin-bottom: 10px;
width:100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
border: 3px solid rgba(0,0,0,0);
}
.feedback-input:focus{
background: #fff;
box-shadow: 0;
border: 3px solid #A79C8E;
color: #A79C8E;
outline: none;
padding: 13px 13px 13px 54px;
}
.focused{
color:#30aed6;
border:#30aed6 solid 3px;
}
textarea {
width: 100%;
height: 150px;
line-height: 150%;
resize:vertical;
}
input:hover, textarea:hover,
input:focus, textarea:focus {
background-color:white;
}
#button-blue{
font-family: 'PT Sans', Arial, Helvetica, sans-serif;
float:left;
width: 100%;
border: #A79C8E solid 4px;
cursor:pointer;
background-color: #A79C8E;
color:white;
font-size:24px;
padding-top:22px;
padding-bottom:22px;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
margin-top:-4px;
font-weight:700;
}
#button-blue:hover{
background-color: #F0B49E;
}
.submit:hover {
color: #3498db;
}
.ease {
width: 0px;
height: 74px;
background-color: #FAF8F2;
-webkit-transition: .3s ease;
-moz-transition: .3s ease;
-o-transition: .3s ease;
-ms-transition: .3s ease;
transition: .3s ease;
}
.submit:hover .ease{
width:100%;
background-color:#A79C8E;
}

Answer 1

Ah...unfortunately, the floating only partially contributes to what you're experiencing. The usage of position: absolute on #form-div actually poses a much bigger problem (in my opinion).
Here are the CSS attributes that I would remove. The float and position attributes are used quite liberally, but I don't think there's a need for so many of them to get what you're looking for:
#form-main {
float:left;
}
#form-div {
float: left;
left: 50%;
position: absolute;
margin-top:30px;
margin-left: -260px;
}
#button-blue {
float:left;
}
And just one that I would add - this lets you easily center #form-div, without needing to apply negative margins or absolute positioning:
#form-div {
margin:30px auto 0;
}
Here's a JSFiddle with those styles commented out, and that last one added.
Since floats and absolute positioning take elements outside of the normal document flow, it can be tricky trying to achieve a desired layout without hard-coding a lot of values. In this case, that CSS was causing a lot of the elements' heights to be ignored, resulting in #contact not resizing to account for them. If you ever bump into a similar problem, try removing most/all of those types of styles, and working from the ground up - it can help a lot!
Hope this helps! Let me know if you have any questions.