如何修复重叠的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; 
}