Search code examples
htmlcssimageblogs

Div Elements Overlapping In Responsive

I am a novice when it comes to HTML and CSS and have been stuck working on this for months. I would like to have a div element that contains a table on the top left of the page. Next to it, I would like and an image and then text below that image that then wraps around the table on the left.

I was able to accomplish this and thought all was good, but then I discovered that when viewed in mobile, the images and text overlap the div with the table and I cannot figure out how to correct it. You can see a sample of what I am talking about at

https://www.reviewsfromthecouch.com/2019/11/dr-phibes-rises-again-film-review/

Here is all the code I have been working with on this problem.

.wrapper {
  float: left;
  clear: right;
  display: table;
  table-layout: fixed;
}

.img-responsive {
  display: table-cell;
  width: 100%;
}

.col-md-6 {
  width: 30%;
  float: left;
}

.col-md-3 {
  width: 70%;
  float: right;
}
<div class="col-md-6">
  <table style="height: 508px; width: 100%; border-collapse: collapse; border-color: #d90e00; border-style: solid;">
    <tbody>
      <tr style="height: 225px;">
        <td style="background-color: #d90e00; height: 225px; width: 100%; border-top: none; border-bottom: none;"><img class="size-full wp-image-3281 aligncenter" src=”[IMAGE]” alt="[IMAGE-TITLE]" width="150" height="225" /></td>
      </tr>
      <tr style="height: 24px;">
        <td style="background-color: #d90e00; height: 24px; width: 100%; padding-right: 10px; padding-left: 10px; border-top: none; border-bottom: none;"><strong><span style="font-size: 10pt; display: block;"> TEXT </span></strong></td>
      </tr>
      <tr style="height: 24px;">
        <td style="height: 24px; width: 100%; padding-right: 10px; padding-left: 10px; border-top: none; border-bottom: none;"><span style="font-size: 10pt;"> TEXT </span></td>
      </tr>
      <tr style="height: 24px;">
        <td style="background-color: #d90e00; height: 24px; width: 100%; padding-right: 10px; padding-left: 10px; border-top: none; border-bottom: none;"><strong><span style="font-size: 10pt; display: block;"> TEXT </span></strong></td>
      </tr>
      <tr style="height: 24px;">
        <td style="height: 24px; width: 100%; padding-right: 10px; padding-left: 10px; border-top: none; border-bottom: none;"><span style="font-size: 10pt;"> TEXT </span></td>
      </tr>
      <tr style="height: 24px;">
        <td style="background-color: #d90e00; height: 24px; width: 100%; padding-right: 10px; padding-left: 10px; border-top: none; border-bottom: none;"><strong><span style="font-size: 10pt; display: block;"> TEXT </span></strong></td>
      </tr>
      <tr style="height: 24px;">
        <td style="height: 24px; width: 100%; padding-right: 10px; padding-left: 10px; border-top: none; border-bottom: none;"><span style="font-size: 10pt;"> TEXT </span></td>
      </tr>
      <tr style="height: 19px;">
        <td style="background-color: #d90e00; height: 24px; width: 100%; padding-right: 10px; padding-left: 10px; border-top: none; border-bottom: none;"><strong><span style="font-size: 10pt; display: block;"> TEXT </span></strong></td>
      </tr>
      <tr style="height: 24px;">
        <td style="width: 100%; padding-right: 10px; padding-left: 10px; border-top: none; border-bottom: none; height: 24px;"><span style="font-size: 10pt;"> TEXT </span></td>
      </tr>
      <tr style="height: 24px;">
        <td style="background-color: #d90e00; height: 24px; width: 100%; padding-right: 10px; padding-left: 10px; border-top: none; border-bottom: none;"><strong><span style="font-size: 10pt; display: block;"> TEXT </span></strong></td>
      </tr>
      <tr style="height: 24px;">
        <td style="height: 24px; width: 100%; padding-right: 10px; padding-left: 10px; border-top: none; border-bottom: none;"><span style="font-size: 10pt;"> TEXT </span></td>
      </tr>
      <tr style="height: 24px;">
        <td style="background-color: #d90e00; height: 24px; width: 100%; padding-right: 10px; padding-left: 10px; border-top: none; border-bottom: none;"><strong><span style="font-size: 10pt; display: block;"> TEXT </span></strong></td>
      </tr>
      <tr style="height: 24px;">
        <td style="height: 24px; width: 100%; padding-right: 10px; padding-left: 10px; border-top: none; border-bottom: none;"><span style="font-size: 10pt;"> TEXT </span></td>
      </tr>
    </tbody>
  </table>
</div>
<div class="col-md-3">
  <h4><img class="img-responsive wp-image-3279" src=”[IMAGE]” alt="[IMAGE-TITLE]" width="100%" height="470" />
    <img class="alignnone wp-image-1912" src=”[IMAGE]” alt="[IMAGE-TITLE]" width="100" height="56" />
    <br><strong><i> TEXT </i></strong><br></h4>
</div>
TEXT

Solution

  • As you have styled your css for all the elements according to % percentages, each and every element will acquire that much amount of screen in % percentage even when the width changes to overcome this you must use Media Queries by which you can style the elements according to the changing sizes of screens and the website becomes responsive.

    For more details about Media Queries Click Here