div1 div div4 div div4 left div4 right

Question

facebookサインアップページに同じように入れたいと思っています。 div1（セクション幅：1024px）は4 divになります。 左側のdiv2（幅50％）はdiv3（fbスローガン）、div4（人の画像を接続）の下にあります。 右側div4（幅：50％サインアップフォーム）。 はどのように作るには？[ここに画像の説明を入力] [1]

<div id="DivSection"> 

     <div id="DivContent"> 
      <div id="DivSlogan"> 
       <label id="slogan">Facebook help you to connecct and share 
        with the<br> people in your life. 
       </label> 
      </div> 

      <div id="DivHomeImage"> 
       <img alt="homeImage" src="img\fbhome.png"> 
      </div> 

     </div> 

     <div id="DivSignUp"> 



      <table> 

       <tr> 
        <td colspan="2"><label style="font-size: xx-large;" 
         class="lblbold">Create an account</label></td> 
        <td></td> 
       </tr> 

       <tr> 
        <td colspan="2"><label class="lblbold">it's free and 
          always will be.</label></td> 
        <td></td> 
       </tr> 


       <tr> 
        <td><input id="inputFS" type="text" class="inputSup" 
         name="fname" placeholder="First Name"></td> 
        <td><input id="inputFS" type="text" class="inputSup" 
         name="sname" placeholder="Surname"></td> 
       </tr> 

       <tr> 
        <td colspan="2"><input type="text" class="inputSup" 
         name="mobeml" placeholder="Mobile number or email address"> 
        </td> 

       </tr> 

       <tr> 
        <td colspan="2"><input type="text" class="inputSup" 
         name="rmobeml" 
         placeholder="Re-Enter mobile number or email address"></td> 

       </tr> 

       <tr> 
        <td colspan="2"><input type="text" class="inputSup" 
         name="npsw" placeholder="New password"></td> 

       </tr> 

       <tr> 
        <td><label class="lblbold">Birthday</label></td> 
       </tr> 

       <tr> 
        <td><select name="day" class="seldob"> 
          <option value="0" selected>Day</option> 
          <option value="1">1</option> 
          <option value="2">2</option> 
          <option value="3">3</option> 
          <option value="4">4</option> 
          <option value="5">5</option> 
          <option value="6">6</option> 
          <option value="7">7</option> 
          <option value="8">8</option> 
          <option value="9">9</option> 
          <option value="10">10</option> 
          <option value="11">11</option> 
          <option value="12">12</option> 
          <option value="13">13</option> 
          <option value="14">14</option> 
          <option value="15">15</option> 
          <option value="16">16</option> 
          <option value="17">17</option> 
          <option value="18">18</option> 
          <option value="19">19</option> 
          <option value="20">20</option> 
          <option value="21">21</option> 
          <option value="22">22</option> 
          <option value="23">23</option> 
          <option value="24">24</option> 
          <option value="25">25</option> 
          <option value="26">26</option> 
          <option value="27">27</option> 
          <option value="28">28</option> 
          <option value="29">29</option> 
          <option value="30">30</option> 
          <option value="31">31</option> 

        </select> <select name="month" class="seldob"> 
          <option value="0">Month</option> 
          <option value="1">Jan</option> 
          <option value="2">Feb</option> 
          <option value="3">Mar</option> 
          <option value="4">Apr</option> 
          <option value="5">May</option> 
          <option value="6">Jun</option> 
          <option value="7">Jul</option> 
          <option value="8">Aug</option> 
          <option value="9">Sep</option> 
          <option value="10">Oct</option> 
          <option value="11">Nov</option> 
          <option value="12">Dec</option> 
        </select> <select name="year" class="seldob"> 
          <option value="0">Year</option> 
          <option value="1">2010</option> 
          <option value="2">2011</option> 
          <option value="3">2012r</option> 
          <option value="4">2013</option> 
          <option value="5">2014</option> 
          <option value="6">2015</option> 
          <option value="7">2016</option> 
        </select></td> 
        <td><label class="lblnote"><a href="">Why do i 
           need to provide my<br> date of birth? 
         </a></label></td> 
       </tr> 

       <tr> 
        <td colspan="2"><input type="radio" name="gender" 
         value="female"><label>Female</label> <input type="radio" 
         name="gender" value="male" checked><label>Male</label></td> 
       </tr> 

       <tr> 
        <td colspan="2"><label class="lblnote">By clicking 
          Create an account, you agree to our <a href="">Terms</a> and<br> 
          that you have read our <a href="">Data Policy</a> , including 
          our <a href="">Cookie Use</a>. 
        </label></td> 
       </tr> 

       <tr> 
        <td id="tdCreAcc" colspan="2"><input id="btnCA" type="submit" 
         name="signup" value="Create an account"></td> 
       </tr> 

       <tr> 
        <td colspan="2"><label> <a href="">Create a Page</a> 
          for a celebrity, band or business. 
        </label></td> 
       </tr> 

      </table> 

     </div> 


    </div> 

CSSコード

body 
{ 
    margin: 0 auto; 
    height:100%; 
    font-family: Calibri; 
    overflow: scroll; 
} 



#DivBody 
{ 
    margin: auto; 
    width:1024px; 
} 

#DivHeader 
{ 
    margin:auto; 
    width:100%; 
    color: white; 
    background-color: #3b5998; 
    display: inline-block; 
} 



#DivSection 
{ 
    height: 83%; 
    position: absolute; 
    width: 1024px; 
    border: 1px solid gray; 
    padding-top: 23px; 
} 

#DivContent 
{ 
    width: 50%; 
} 

#DivSlogan 
{ 
    float:left; 
    color: #0e385f; 
    font-size: 20px; 
    font-weight: bold; 
} 

#DivHomeImage 
{ 
    float:left; 
    margin-top: 5%; 
    position: absolute; 
} 

#DivSignUp 
{ 
    float: right; 
    border-radius: 5px; 
     position:absolute; 
    right: 171px; 
} 





#DivFooter 
{ 

    width:1024px ; 
    display: inline-block; 
    bottom: 0; 

} 

Answer 1

私はdiv要素とフロートとの簡単な例をしました。 これは100万の可能性の1つになります。私は浮動小数点が好きです...他の人は、位置またはフレックス/グリッドを使用します。

.wrapper { 
    width: 1024; 
    height: 100%; 
    min-height: 800px; //not absolutly needed 
    border: 1px solid red; //not needed 
} 

.slogan { 
    padding-top: 20px; //not needed 
} 

.container { 
    width: 50%; 
    float:left; 
} 

.people-image { 
    width: 100%; 
    border: 1px solid yellow; //not needed 
} 

.green { 
    background-color: green; //not needed 
} 

<div class="wrapper"> 
    <div class="container"> 
     <div class="slogan"> 
      Facebook slogan goes here 
     </div> 
     <img src="" alt="image" class="people-image"/> 
    </div> 
    <div class="container green"> 
     Login Content goes here 
    </div> 
</div> 

Answer 2

私は解決策を持ってresponding.finallyため、kabaehrロベルト・デ・ラ・パーラをお願いします。

 #DivSection 
    { 
     padding-top: 40px; 
     height: 83%; 
     position: inherit; 
     width: 1024px; 

    } 

#DivContent 
{ 
    width: 50%; 
    height: 400px;  
    position: absolute; 
} 

#DivSlogan 
{ 
    float:left; 
    color: #0e385f; 
    font-size: 20px; 
    font-weight: bold; 
} 

#DivHomeImage 
{ 
    float:left; 
    margin-top: 1%; 

} 

#DivSignUp 
{ 
    float: right; 
    border-radius: 5px; 
    margin-right: 22px; 
    margin-top: -30px; 
}