How to correctly position relative p tag in a td

Question

Description: The problem is that the text seems to overflow from the td which I do not want and on top of that, I would like to place the text underneath the Header (H5) but avoid wrapping the text underneath the image, which I assume can be done via giving the image a static width value and using the left-property. But when I attempt to do so it doesn't come out right.

table.service_section{
    width: 80%;
    margin-left: 10%;
    border-spacing: 10px;}

  table.service_section td{
    border: 2px solid #ccc;
    box-sizing: border-box;
    border-radius:5px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);}

  table.service_section td img{
    display: inline-block;
    width: 50px;
    height: 25px;}
  table.service_section td h5{
    display: inline-block;
    margin: 0;
    padding: 0;
    position: absolute;}
  table.service_section td p{
    display: inline-block;
    position: relative;
    margin: 0;
    top: 0px;
    left: 50px;
    font-size: 10;}

<table class = "service_section">
  <tr>
    <td>
      <img src="https://image.flaticon.com/icons/svg/23/23665.svg" /> <h5>Home Button</h5>
      <p>This is going to be information regarding the service/product which is provided by Odeyale Corporation.</p>
    </td>
    <td>
      <img src="https://image.flaticon.com/icons/svg/23/23665.svg" /> <h5>Home Button</h5>
      <p>This is going to be information regarding the service/product which is provided by Odeyale Corporation.</p>
    </td>
    <td>
      <img src="https://image.flaticon.com/icons/svg/23/23665.svg" /> <h5>Home Button</h5>
      <p>This is going to be information regarding the service/product which is provided by Odeyale Corporation.</p>
    </td>
  </tr>

  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>

Answer 1

Try This:

table.service_section {
  width: 80%;
  margin-left: 10%;
  border-spacing: 10px;
}

table.service_section td {
  border: 2px solid #ccc;
  box-sizing: border-box;
  border-radius:5px;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}

table.service_section td img {
  float: left;
  width: 20%;
  height: 25px;
}

table.service_section td h5 {
  margin: 0 0 5px 0;
  padding: 0;
  position: relative;
  width: 100%;
  word-wrap:break-word;
}

table.service_section td p {
  position: relative;
  font-size: 10;
  margin-top: 0;
  word-wrap:break-word;
}

.wr {
  width: 75%;
  float: left;
  margin-left: 4%;
}

<table class = "service_section">
  <tr>
    <td>
      <img src="https://image.flaticon.com/icons/svg/23/23665.svg" />
      <div class="wr">
        <h5>Home Button</h5>
      <p>This is going to be information regarding the service / product which is provided by Odeyale Corporation.</p>
      </div>
    </td>
    <td>
      <img src="https://image.flaticon.com/icons/svg/23/23665.svg" />
      <div class="wr">
         <h5>Home Button</h5>
      <p>This is going to be information regarding the service / product which is provided by Odeyale Corporation.</p>
      </div>
    </td>
    <td>
      <img src="https://image.flaticon.com/icons/svg/23/23665.svg" /> 
      <div class="wr">
      <h5>Home Button</h5>
      <p>This is going to be information regarding the service / product which is provided by Odeyale Corporation.</p>
      </div>
    </td>
  </tr>

  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>

Answer 2

Isaac - It looks like your "table.service_section td p" you are pushing 50px from the left with this css "left: 50px;". That is pushing your p tag outside of the 100% width for the td. A quick fix would be adding a margin-right of 50px to offset the pushed p tag. That will keep it in the window that you are looking for. That said, there are more elegant ways to achieve the same thing using Bootstrap or even Flex Box. Check out the article on Flex Box https://css-tricks.com/snippets/css/a-guide-to-flexbox/. That may give you some new strategies to achieve what you are looking for. Again, using Bootstrap Cards would help you achieve the same thing. One last item, your image is much larger than needed. I would resize the image to exactly what you want, which will help you to eliminate unnecessary code, and help you to achieve the desired result quicker. Hope that helps.

table.service_section{
    width: 80%;
    margin-left: 10%;
    border-spacing: 10px;}

  table.service_section td{
    border: 2px solid #ccc;
    box-sizing: border-box;
    border-radius:5px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);}

  table.service_section td img{
    display: inline-block;
    width: 50px;
    height: 25px;}
  table.service_section td h5{
    display: inline-block;
    margin: 0;
    padding: 0;
    position: absolute;}
  table.service_section td p{
    display: inline-block;
    position: relative;
    margin: 0;
    top: 0px;
    left: 50px;
    margin-right: 55px;
    font-size: 10;}

<table class = "service_section">
  <tr>
    <td>
      <img src="https://image.flaticon.com/icons/svg/23/23665.svg" /> <h5>Home Button</h5>
      <p>This is going to be information regarding the service/product which is provided by Odeyale Corporation.</p>
    </td>
    <td>
      <img src="https://image.flaticon.com/icons/svg/23/23665.svg" /> <h5>Home Button</h5>
      <p>This is going to be information regarding the service/product which is provided by Odeyale Corporation.</p>
    </td>
    <td>
      <img src="https://image.flaticon.com/icons/svg/23/23665.svg" /> <h5>Home Button</h5>
      <p>This is going to be information regarding the service/product which is provided by Odeyale Corporation.</p>
    </td>
  </tr>

  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>