Search code examples
htmlwoocommercecode-snippets

I cannot get my simple html code two create a two column layout with images inside


I know this is simple for most people on here but I am trying my best. I need a little guidance with a project I am trying to do. I am working on a strictly html block widget on my wordpress site. I am trying to do a two column layout with images in each column. I have it working but I cannot figure out how to make the two images full width without space in between. Ive tried a millions ways but I am struggling. Any help would be amazing and appreciated!

The code I am currently using is

<table style="margin-left: 0px; margin-right: 0px; width: 100%;" border="0px" cellspacing="0px" cellpadding="0px">
<tbody><tr><td>
<img src="https://www.dailymutt.com/wp-content/uploads/2020/10/Untitled-1_01.jpg" alt="" /></td><td>
<img src="https://www.dailymutt.com/wp-content/uploads/2020/10/Untitled-1_02.jpg" alt="" /></td></tr></tbody>
</table>

Ive attached two images explaining the errors I am having with the coding I am doing.

This is where the two images have a padding of somesort This is what I am trying to achieve.


Solution

  • So i figured it out myself. This is the new html code I had to use because there were css that my theme was over riding for the

    <table>
    <tbody><tr><td style="margin-left: 0px; margin-right: 0px; width: 100%; padding: 0px 0px !important;background-color:#000" border="0px" cellspacing="0px" cellpadding="0px">
    <img src="https://www.dailymutt.com/wp-content/uploads/2020/10/Untitled-1_01.jpg" alt="" /></td><td style="margin-left: 0px; margin-right: 0px; width: 100%; padding: 0px 0px !important;background-color:#000" border="0px" cellspacing="0px" cellpadding="0px">
    <img src="https://www.dailymutt.com/wp-content/uploads/2020/10/Untitled-1_02.jpg" alt="" /></td></tr></tbody>
    </table>