How to place image without text alongside in html

Question

I am trying to create an invoice by modifying some existing html. I want to put an image (logo) at the top of the page and then start a table underneath it. The problem I have is that whatever I do the text in the table appears alongside the image. I have found all sorts of ideas to wrap text around an image but nothing to actually NOT wrap text around an image. Except as a caption to an image, also not what I want. Code I have is:-

 <style> div.logo {float: right;} table {width: 100%; table-layout: fixed;} .twenty {width: 20%; } .thirty {width: 30%; } .fifty {width: 50%; } </style> <div class = "logo"> <img align="right" src="https://cdn.shopify.com/s/files/1/1212/3100/files/logo.png?14279783622096777710" width="30%" height="30%"><br clear="all"> </div> <table> <colgroup> <col class="fifty" /> <col class="twenty" /> <col class="thirty" /> </colgroup> <tbody> <tr> <td></td> <td>Invoice Date</td> <td>{{ shop_name }}</td> </tr> <tr> <td></td> <td>Date {{created_at | date: "%d/%m/%y" }}</td> <td>{{ shop.address }}</td> </tr> </tbody> </table> 

Any help really appreciated.

What I get Link to my invoice render

Answer 1

Try this if you are ok. The image will be placed at center of the div.

<div class = "logo">
  <img align="right" src="https://cdn.shopify.com/s/files/1/1212/3100/files/logo.png?14279783622096777710" width="30%" height="30%"><br clear="all">
</div>

.logo {
    width: 100%;
    text-align: center;
    justify-content: center;
    display: flex;
}

<div class="table">
<table>
  <colgroup>
    <col class="fifty" />
    <col class="twenty" />
    <col class="thirty" />
  </colgroup>
  <tbody>
    <tr>
      <td></td>
      <td>Invoice Date</td>
      <td>{{ shop_name }}</td>
    </tr>
    <tr>
      <td></td>
      <td>Date {{created_at | date: "%d/%m/%y" }}</td>
      <td>{{ shop.address }}</td>
    </tr>
  </tbody>
</table>
</div>

.table {
    width: 100%;
    text-align: center;
    justify-content: center;
    display: flex;
}

Answer 2

It looks like there wasn't any issue with your code as such, the first column of the table was just empty and you have a width: 50% on it from the colgroup.fifty style. This was making it look like the table was pushed to the right.

See the pen here with background colours to make it more clear: https://codepen.io/lauraeddy/pen/zPYKva