CSS 플로팅 div가 상위 div 아래에 표시됨

Question

this codepen을 기반으로 연락처 양식의 스타일을 지정하려고합니다. 플로트 된 양식이 내부 div가 아닌 상위 div 아래로 이동하는 문제가 있습니다. 행운과 함께 clearfix를 추가하려고했습니다. 나는 또한 행운이없는 오버플로를 가지고 주위를 어지럽 혔다. CSS는 내 강한 소송이 아니며, 일을 복잡하게하는 난간에서 이것을하고 있습니다. 그래서 나는 그것이 내가 어리 석다고 바보 같은 것이라고 확신합니다. 생성 된 HTML과 CSS는 아래에 있으며 수행중인 내용을 볼 수있는 here is a fiddle입니다. 전체 모양이 흰색 부분에 있고 싶습니다. 아래 부분이 아닙니다. 제공 할 수있는 도움에 감사드립니다.

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="&#x2713;" /> 
        <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

. #form-div에 position: absolute을 사용하면 실제로 더 큰 문제가 발생합니다 (제 생각에는).

다음은 CSS 속성입니다. 은입니다. 플로트와 위치 속성은 매우 자유롭게 사용,하지만 난 당신이 찾고있는 것을 얻기에 너무 많은 필요가 있다고 생각하지 않습니다

#form-main { 
    float:left; 
} 
#form-div { 
    float: left; 
    left: 50%; 
    position: absolute; 
    margin-top:30px; 
    margin-left: -260px; 
} 
#button-blue { 
    float:left; 
} 

내가 을 추가 한이 - 여기

#form-div { 
    margin:30px auto 0; 
} 

을 주석 처리하는 스타일과 JSFiddle을, 그리고 마지막 하나는 추가 :이 쉽게 부정적인 마진 또는 절대 위치를 적용 할 필요없이, #form-div 중앙에 맞출 수 있습니다.

float 및 절대 위치 지정은 일반적인 문서 흐름을 벗어나는 요소를 사용하기 때문에 많은 값을 하드 코딩하지 않고 원하는 레이아웃을 얻으려고 힘들 수 있습니다. 이 경우 해당 CSS로 인해 요소 높이가 무시되는 결과로 인해 #contact의 크기가 조정되지 않습니다. 혹시 비슷한 문제가 발생한다면, 대부분의/모든 유형의 스타일을 제거하고 처음부터 작업 해보십시오. 많은 도움이 될 수 있습니다!

희망이 도움이됩니다. 궁금한 점이 있으면 알려주세요.