调整浏览器大小时文本重叠

Question

I asked this question before in relation to my navigation menu. The answers I received helped me to fix it (I had to change the px to %) However, when applying this fix to my tables on my page, they don't get cut off, but they overlap when I resize the browser.

HTML:

<div class="Table">
        <object id="column1R">Born</object>
        <object id="column2R">Died</object>
        <object id="column3R">Spouse(s)</object>
        <object id="column4R">Occupation</object>

        <object id="answer1R">February 4, 1913</object>
        <object id="answer2R">October 24, 2005</object>
        <object id="answer3R">Raymond Parks</object>
        <object id="answer4R">Civil rights activist</object>
    </div>

CSS:

    #column1R {
    font-family: "Bree Serif", "serif"; 
    color: white;
    font-size: 28px;
    margin-top: 124px;
    margin-right: 23%;
    position: relative;
    border: 2px solid white;
    padding: 4px;
    text-align: center;
    width: 75px;
    float: right;

}

#answer1R {
    font-family: "serif"; 
    color: white;
    float: right;
    font-size: 28px;
    margin-top: 124px;
    margin-right: -22.6%;
    position: relative;
    border: 2px solid white;
    padding-top: 8px;
    height: 0px auto;
    min-height: 38px;
    width: 200px;
    text-align: center;
}

#column2R {
    font-family: "Bree Serif", "serif"; 
    color: white;
    font-size: 28px;
    margin-top: 172px;
    margin-right: -6.8%;
    position: relative;
    border: 2px solid white;
    padding: 4px;
    width: 75px;
    text-align: center;
    float: right;

}

#answer2R {
    font-family: "serif"; 
    color: white;
    float: right;
    font-size: 28px;
    margin-top: 172px;
    margin-right: -22.6%;
    position: relative;
    border: 2px solid white;
    padding-top: 8px;
    height: 0px auto;
    min-height: 38px;
    width: 200px;
    text-align: center;
    font-size: 27px;
}

#column3R {
    font-family: "Bree Serif", "serif"; 
    color: white;
    font-size: 18px;
    margin-top: 220px;
    margin-right: -6.8%;
    position: relative;
    border: 2px solid white;
    padding: 4px;
    width: 75px;
    text-align: center;
    float: right;

}

#answer3R {
    font-family: "serif"; 
    color: white;
    font-size: 18px;
    margin-top: 220px;
    margin-right: -22.6%;
    position: relative;
    border: 2px solid white;
    padding-top: 7px;
    height: 0px auto;
    min-height: 25px;
    width: 200px;
    text-align: center;
    float: right;
}

#column4R {
    font-family: "Bree Serif", "serif"; 
    color: white;
    font-size: 15px;
    margin-top: 254px;
    margin-right: -6.8%;
    position: relative;
    border: 2px solid white;
    padding: 4px;
    width: 75px;
    text-align: center;
    float: right;

}

#answer4R {
    font-family: "serif"; 
    color: white;
    font-size: 18px;
    margin-top: 254px;
    margin-right: -22.6%;
    position: relative;
    border: 2px solid white;
    padding-top: 5px;
    height: 0px auto;
    min-height: 23px;
    width: 200px;
    text-align: center;
    float: right;
}

Here is the code in action: https://codepen.io/anon/pen/BRpMRy

If you resize your browser, you can see they overlap.

If someone can come up with a fix then that would be really great and appreciated.

Answer 1

The object tag defines an embedded object within an HTML document. Use this element to embed multimedia (like audio, video, Java applets, ActiveX, PDF, and Flash) in your web pages. It can also be used to embed another webpage into your HTML document.

I think this is better!

<table>
  <tr>
      <td>Born</td><td>February 4, 1913</td>
  </tr>
  <tr>
      <td>Die</td><td>October 24, 2005</td>
  </tr>
  <tr>
     <td>Spouse(s)</td><td>Raymond Parks</td>
  </tr>
  <tr>
    <td>Occupation</td><td>Civil rights activist</td>
  </tr>
</table>