title: Website images overlapping(Shopify)
body: <p>I am using shopify and added a section using my own html into it. I added the picture of the lipstick, the face and the one under those that is being overlapped by one of the products from the 'featured products' section that comes built into the theme.  I was wondering how I would be able to fix this? Do I need to go in and fix something with liquid? </p>
  
  <p>I have solved this issue by using a table in html instead; Ive provided my solution for future readers. </p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class="hover"&gt;
  &lt;center&gt;
  &lt;table style="width: 182px; height: 159px;"&gt;
  &lt;tbody&gt;
  &lt;tr style="height: 33px;"&gt;
  &lt;td style="width: 57.125px; height: 20px;"&gt;
  
    &lt;figure&gt;&lt;img  align=left valign=top width=350px type="image/jpeg" src="{{ 'lipstickpink.jpg' | asset_url}}" /&gt;&lt;/figure&gt;
    &lt;figure&gt; &lt;img align=left valign=bottom width=400px type="image/jpeg" src="{{ 'shadow.jpg' | asset_url}}" /&gt; &lt;/figure&gt;
  
    &lt;/td&gt;
  &lt;td style="width: 900px; "&gt;
  
    &lt;figure&gt;&lt;img align=center valign=top width=900px type="image/jpeg" src="{{ 'facehomepage.jpg' | asset_url}}" /&gt;&lt;/figure&gt;
  
    &lt;/td&gt;
  
    &lt;/center&gt;
  
    &lt;/td&gt;
  &lt;/tr&gt;
  &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p></p>
  
  <p><a href="https://i.stack.imgur.com/3Gywt.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/3Gywt.png" alt="enter image description here"></a></p>