サブディビジョンはメインディビジョンでプッシュダウンされます

Question

私は現在コンタクトページで作業しています。基本的に、私はメインコンテナを作成したい。メインコンテナの内側には、フローティングになるサブコンテナが含まれています。しかし、テキストをいくつか含めると、サブコンテナは「プッシュダウン」します。それはなぜですか、どうすれば解決できますか？右あなたがポジションを追加することができ、サブコンテナに：代わりにフロートを行う

.contact-container-main { 
 
    width: 900px; 
 
    height: 600px; 
 
    margin: 100px auto; 
 
    background-color: #808080; 
 
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); 
 
    -webkit-box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); 
 
    -moz-box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); 
 
} 
 
.contact-container-main h2 { 
 
    width: 250px; 
 
    margin: 15px; 
 
    font-size: 40px; 
 
    color: #FF0000; 
 
} 
 
.contact-container-main p { 
 
    width: 600px; 
 
    margin-left: 15px; 
 
} 
 
.contact-container-sub { 
 
    width: 250px; 
 
    height: 580px; 
 
    margin: 10px; 
 
    float: right; 
 
    background-color: #000000; 
 
}

<div class="contact-container-main"> 
 
    <h2>Contact Us</h2> 
 
    <p> 
 
    Lorem ipsum dolor sit amet conse ctetuer adipiscing elit. Morbi comod sed dolor sit amet consect adipiscing elit 
 
    </p> 
 

 
    <div class="contact-container-sub"> 
 

 
    </div> 
 
</div>

Answer 1

絶対。頂点と右の位置も.contact-container-mainを基準にした位置です。

.contact-container-main { 
     width: 900px; 
     height: 600px; 
     margin: 100px auto; 
     position: relative; 
     background-color: #808080; 
     box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); 
     -webkit-box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); 
     -moz-box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); 
    } 
    .contact-container-sub { 
     width: 250px; 
     height: 580px; 
     position: absolute; 
     margin: 10px; 
     background-color: #000000; 
     right: 0; 
     top: 0; 
    } 

Answer 2

あなたはまた、フロートとテキストのコンテナを必要とするが

<div class="contact-container-main"> 
    <div class="contact-container-text"> 
    <h2>Contact Us</h2> 
    <p> 
    Lorem ipsum dolor sit amet conse ctetuer adipiscing elit. Morbi comod sed dolor sit amet consect adipiscing elit 
    </p> 
</div> 

    <div class="contact-container-sub"> 

    </div> 
</div> 

を残しました