如何修復重疊的div元素？

Question

當最小化窗口時，兩個元素重疊。
我該如何解決它？

#pageName { 
 
    text-align: center; 
 
    text-decoration: underline; 
 
} 
 
#toAddress { 
 
    float: left; 
 
    margin-left: 20px; 
 
} 
 
#fromAddress { 
 
    float: right; 
 
    margin-right: 100px; 
 
} 
 
#from { 
 
    vertical-align: top; 
 
    padding-top: 10px; 
 
    padding-right: 5px; 
 
} 
 
#des { 
 
    width: 730px; 
 
    margin-top: 80px; 
 
    margin-left: 20px; 
 
    position: fixed; 
 
    font-style: italic; 
 
} 
 
#mainContent { 
 
    margin-top: 200px; 
 
    margin-left: 20px; 
 
} 
 
#tblContent { 
 
    width: 100%; 
 
    border: 1px solid black; 
 
    border-collapse: collapse; 
 
    margin-top: 20px; 
 
} 
 
#tblContent td, 
 
#tblContent th { 
 
    border: 1px solid black; 
 
    text-align: center; 
 
}

<div id="pageName"> 
 
    URGENT REQUEST FOR SECURITY CHECK 
 
</div> 
 
<div id="toAddress"> 
 
    <table> 
 
    <tr> 
 
     <td>To:</td> 
 
     <td id="toName">ABBEY NATIONAL PLC</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Fax:</td> 
 
     <td id="toFax">Uknown</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Date:</td> 
 
     <td>04 Jun 2001 10:30:21</td> 
 
    </tr> 
 
    </table> 
 
</div> 
 
<div id="fromAddress"> 
 
    <table> 
 
    <tr> 
 
     <td id="from">From:</td> 
 
     <td> 
 
     <table> 
 
      <tr> 
 
      <td>Acquirung Bank</td> 
 
      </tr> 
 
      <tr> 
 
      <td>Risk Management</td> 
 
      </tr> 
 
      <tr> 
 
      <td>100 Bond Street</td> 
 
      </tr> 
 
      <tr> 
 
      <td>London</td> 
 
      </tr> 
 
      <tr> 
 
      <td>W1</td> 
 
      </tr> 
 
     </table> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td>Fax:</td> 
 
     <td id="fromFax">0207 234567890/</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Tel:</td> 
 
     <td id="fromTel">0207 123456789/</td> 
 
    </tr> 
 
    </table> 
 
</div> 
 

 
<div id="des"> 
 
    The transaction/authorization detailed below, have been identified by RiskNet as suspicious activity for the merchant. Could you please check the status of the cards and if the values are not normal spending, could you please contact the cardholder to 
 
    verify the transaction. 
 
    <br />Test 
 
</div> 
 

 
<div id="mainContent"> 
 
    <span id="text"> 
 
      Please fax a response by return 
 
     </span> 
 

 
    <table id="tblContent"> 
 
    <thead> 
 
     <tr> 
 
     <th>Cardholder Number</th> 
 
     <th>Ccy</th> 
 
     <th>Amount</th> 
 
     <th>Trans Date</th> 
 
     <th>Type</th> 
 
     <th>Our Reference</th> 
 
     <th>MCC</th> 
 
     <th>Retailer NameTown</th> 
 
     <th>Normal</br>Spending?</th> 
 
     <th>Cardholder</br>Contacted</th> 
 
     <th>Response</th> 
 
     <th>Does Customer</br>Have Card?</th> 
 
     <th>Goods</br>Recieved?</th> 
 
     </tr> 
 
    </thead> 
 
    <tr> 
 
     <td>123456789</td> 
 
     <td>GBP</td> 
 
     <td>125.78</td> 
 
     <td>24 May 2001</td> 
 
     <td>D</td> 
 
     <td>1254151822928</td> 
 
     <td>3391</td> 
 
     <td>PICK N MIX, MANCHETER</td> 
 
     <td>YES/NO</td> 
 
     <td>YES/NO</td> 
 
     <td>Genuine/Fraud</td> 
 
     <td>YES/NO</td> 
 
     <td>YES/NO</td> 
 
    </tr> 
 
    <tr> 
 
     <td>123456789</td> 
 
     <td>GBP</td> 
 
     <td>27.60</td> 
 
     <td>23 May 2001</td> 
 
     <td>D</td> 
 
     <td>1254151822929</td> 
 
     <td>3391</td> 
 
     <td>PICK N MIX, MANCHETER</td> 
 
     <td>YES/NO</td> 
 
     <td>YES/NO</td> 
 
     <td>Genuine/Fraud</td> 
 
     <td>YES/NO</td> 
 
     <td>YES/NO</td> 
 
    </tr> 
 
    <tr> 
 
     <td>123456789</td> 
 
     <td>GBP</td> 
 
     <td>435.70</td> 
 
     <td>22 May 2001</td> 
 
     <td>D</td> 
 
     <td>100131014426</td> 
 
     <td>5193</td> 
 
     <td>MECHANICS ANONYMOUS, LONDON</td> 
 
     <td>YES/NO</td> 
 
     <td>YES/NO</td> 
 
     <td>Genuine/Fraud</td> 
 
     <td>YES/NO</td> 
 
     <td>YES/NO</td> 
 
    </tr> 
 
    <tr> 
 
     <td>123456789</td> 
 
     <td>GBP</td> 
 
     <td>72.16</td> 
 
     <td>21 May 2001</td> 
 
     <td>D</td> 
 
     <td>100131014427</td> 
 
     <td>5193</td> 
 
     <td>MECHANICS ANONYMOUS, LONDON</td> 
 
     <td>YES/NO</td> 
 
     <td>YES/NO</td> 
 
     <td>Genuine/Fraud</td> 
 
     <td>YES/NO</td> 
 
     <td>YES/NO</td> 
 
    </tr> 
 
    <tr> 
 
     <td>123456789</td> 
 
     <td>GBP</td> 
 
     <td>259.75</td> 
 
     <td>21 May 2001</td> 
 
     <td>D</td> 
 
     <td>1254151822930</td> 
 
     <td>3391</td> 
 
     <td>PICK N MIX, MANCHETER</td> 
 
     <td>YES/NO</td> 
 
     <td>YES/NO</td> 
 
     <td>Genuine/Fraud</td> 
 
     <td>YES/NO</td> 
 
     <td>YES/NO</td> 
 
    </tr> 
 
    <tr> 
 
     <td>123456789</td> 
 
     <td>GBP</td> 
 
     <td>509.84</td> 
 
     <td>24 May 2001</td> 
 
     <td>D</td> 
 
     <td>1254151822931</td> 
 
     <td>3391</td> 
 
     <td>PICK N MIX, MANCHETER</td> 
 
     <td>YES/NO</td> 
 
     <td>YES/NO</td> 
 
     <td>Genuine/Fraud</td> 
 
     <td>YES/NO</td> 
 
     <td>YES/NO</td> 
 
    </tr> 
 
    <tr> 
 
     <td>123456789</td> 
 
     <td>GBP</td> 
 
     <td>46.43</td> 
 
     <td>24 May 2001</td> 
 
     <td>D</td> 
 
     <td>1254151822932</td> 
 
     <td>3391</td> 
 
     <td>PICK N MIX, MANCHETER</td> 
 
     <td>YES/NO</td> 
 
     <td>YES/NO</td> 
 
     <td>Genuine/Fraud</td> 
 
     <td>YES/NO</td> 
 
     <td>YES/NO</td> 
 
    </tr> 
 
    </table> 
 
</div>

View on CodePen這樣做將是阻止窗口越來越小，並允許重疊

Answer 1

的一種方式。

您可以添加以下CSS：

html, body { 
    min-width: 1000px; 
} 

見CodePen fork。

Answer 2

你應該做的是爲這些#toAdress和#fromAdress DIV創建一個父DIV，並將這個小小的clearfix用於這個新創建的父div。這是浮動物品的一個非常常見的問題......所以它可能看起來像

<div class="cf"> 
    <div id="toAdress">... your content ...</div> 
    <div id="fromAdress">... your content ...</div> 
</div> 

.cf:before, 
.cf:after { 
    content: " "; 
    display: table; 
} 

.cf:after { 
    clear: both; 
}