Keep a
inside a
from overlapping when resizing browser

Question

I am not a coder but I have taken on the task of fixing some problems on a site that's about to launch. Typical story right? I really want to learn. I've searched the forums and tried many of the solutions and none of them have solved my problem. Please be gentle.

I have a woo commerce page with multiple divs for each item. For the first two of the items, there is an extra div that holds a banner that calls attention to the items. It looks like this extra div is causing the other content above it to smash into each other.

Here's a link to a screenshot - I'm new and I can post images yet. https://www.dropbox.com/s/2g0nn1boxkytaxg/Screen%20Shot%202017-05-25%20at%2011.30.29%20AM.png?dl=0

Again, I've tried various fixes from other posts:

Beginner's stuff: How to stop CSS' Divs from overlapping?

How do I stop these divs from overlapping?

And none of those solutions have helped me.

Here is the HTML for the first 3 items on the page. The first 2 have a "MATCHED FOR YOU" banner and the 3rd one does not. The text that is overlapping is the "p" of "24 Channel Digital Mixer" is smashing into the top of div class="ss-price"

</div>
</div>
<!--end col-xs-12 col-md-4 -->

<div id="product-results-col" class="col-xs-12 col-sm-12 col-md-10">

  <!--<h1 class="page-title">Shop</h1>-->





  <ul class="products">



    <div class="col-md-3 ss-product post-120 product type-product status-publish has-post-thumbnail product_cat-audio product_cat-mixer pa_brand-yamaha first instock sale featured taxable shipping-taxable purchasable product-type-simple">
      <div class="row matched">
        <div class="col-xs-12 col-sm-12 col-md-12 product-container">
          <a href="http://solvesunday.wpengine.com/product/yamaha-tf-series-digital-console-w-25-motor-faders-48-inputs-mixing-capacity-24-local-xlrtrs-combo-inputs-2-rca-16-xlr-outputs-tf3/" class="woocommerce-LoopProduct-link"><img width="300" height="300" src="http://solvesunday.wpengine.com/wp-content/uploads/2016/12/YAMAHA-TF-Series-Digital-Console-w-25-Motor-Faders-48-inputs-Mixing-Capacity-24-Local-XLRTRS-Combo-Inputs-2-RCA-16-XLR-Outputs-TF3-300x300.jpg" class="attachment-shop_catalog size-shop_catalog wp-post-image"
              alt="YAMAHA - TF Series Digital Console w/ 25 Motor Faders, 48-inputs Mixing Capacity, 24 Local XLR/TRS Combo Inputs, 2 RCA, 16 XLR Outputs (TF3)" title="YAMAHA - TF Series Digital Console w/ 25 Motor Faders, 48-inputs Mixing Capacity, 24 Local XLR/TRS Combo Inputs, 2 RCA, 16 XLR Outputs (TF3)"
              srcset="http://solvesunday.wpengine.com/wp-content/uploads/2016/12/YAMAHA-TF-Series-Digital-Console-w-25-Motor-Faders-48-inputs-Mixing-Capacity-24-Local-XLRTRS-Combo-Inputs-2-RCA-16-XLR-Outputs-TF3-300x300.jpg 300w, http://solvesunday.wpengine.com/wp-content/uploads/2016/12/YAMAHA-TF-Series-Digital-Console-w-25-Motor-Faders-48-inputs-Mixing-Capacity-24-Local-XLRTRS-Combo-Inputs-2-RCA-16-XLR-Outputs-TF3-150x150.jpg 150w, http://solvesunday.wpengine.com/wp-content/uploads/2016/12/YAMAHA-TF-Series-Digital-Console-w-25-Motor-Faders-48-inputs-Mixing-Capacity-24-Local-XLRTRS-Combo-Inputs-2-RCA-16-XLR-Outputs-TF3-180x180.jpg 180w, http://solvesunday.wpengine.com/wp-content/uploads/2016/12/YAMAHA-TF-Series-Digital-Console-w-25-Motor-Faders-48-inputs-Mixing-Capacity-24-Local-XLRTRS-Combo-Inputs-2-RCA-16-XLR-Outputs-TF3.jpg 600w"
              sizes="(max-width: 300px) 100vw, 300px" />
            <a href="http://solvesunday.wpengine.com/product/yamaha-tf-series-digital-console-w-25-motor-faders-48-inputs-mixing-capacity-24-local-xlrtrs-combo-inputs-2-rca-16-xlr-outputs-tf3/">
              <div class="meta">YAMAHA &#8211; TF3...</div>
            </a>
            <div class="ss-price"><del><span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">&#36;</span>2,999.99</span></del> <ins><span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">&#36;</span>2,100.00</span></ins></div>

            <p>24 Channel Digital Mixer</p>
          </a>
        </div>
        <!-- end col-md-12 -->
      </div>
      <!-- end row matched -->

      <div class="row banner-wrapper">
        <div class="col-md-12">
          <div class="matched-banner">Matched for You</div>
        </div>
        <!-- end col-md-12-->
      </div>
      <!-- end row banner -->

    </div>
    <!-- end col-md-3 ss-product-->


    <div class="col-md-3 ss-product post-121 product type-product status-publish has-post-thumbnail product_cat-audio product_cat-mixer pa_brand-yamaha  instock sale featured taxable shipping-taxable purchasable product-type-simple">
      <div class="row matched">
        <div class="col-xs-12 col-sm-12 col-md-12 product-container">
          <a href="http://solvesunday.wpengine.com/product/yamaha-tf-series-digital-console-w-33-motor-faders-48-inputs-mixing-capacity-32-local-xlrtrs-combo-inputs-2-rca-16-xlr-outputs-tf5/" class="woocommerce-LoopProduct-link"><img width="300" height="300" src="http://solvesunday.wpengine.com/wp-content/uploads/2016/12/YAMAHA-TF-Series-Digital-Console-w-33-Motor-Faders-48-inputs-Mixing-Capacity-32-Local-XLRTRS-Combo-Inputs-2-RCA-16-XLR-Outputs-TF5-300x300.jpg" class="attachment-shop_catalog size-shop_catalog wp-post-image"
              alt="YAMAHA - TF Series Digital Console w/ 33 Motor Faders, 48-inputs Mixing Capacity, 32 Local XLR/TRS Combo Inputs, 2 RCA, 16 XLR Outputs (TF5)" title="YAMAHA - TF Series Digital Console w/ 33 Motor Faders, 48-inputs Mixing Capacity, 32 Local XLR/TRS Combo Inputs, 2 RCA, 16 XLR Outputs (TF5)"
              srcset="http://solvesunday.wpengine.com/wp-content/uploads/2016/12/YAMAHA-TF-Series-Digital-Console-w-33-Motor-Faders-48-inputs-Mixing-Capacity-32-Local-XLRTRS-Combo-Inputs-2-RCA-16-XLR-Outputs-TF5-300x300.jpg 300w, http://solvesunday.wpengine.com/wp-content/uploads/2016/12/YAMAHA-TF-Series-Digital-Console-w-33-Motor-Faders-48-inputs-Mixing-Capacity-32-Local-XLRTRS-Combo-Inputs-2-RCA-16-XLR-Outputs-TF5-150x150.jpg 150w, http://solvesunday.wpengine.com/wp-content/uploads/2016/12/YAMAHA-TF-Series-Digital-Console-w-33-Motor-Faders-48-inputs-Mixing-Capacity-32-Local-XLRTRS-Combo-Inputs-2-RCA-16-XLR-Outputs-TF5-180x180.jpg 180w, http://solvesunday.wpengine.com/wp-content/uploads/2016/12/YAMAHA-TF-Series-Digital-Console-w-33-Motor-Faders-48-inputs-Mixing-Capacity-32-Local-XLRTRS-Combo-Inputs-2-RCA-16-XLR-Outputs-TF5.jpg 600w"
              sizes="(max-width: 300px) 100vw, 300px" />
            <a href="http://solvesunday.wpengine.com/product/yamaha-tf-series-digital-console-w-33-motor-faders-48-inputs-mixing-capacity-32-local-xlrtrs-combo-inputs-2-rca-16-xlr-outputs-tf5/">
              <div class="meta">YAMAHA TF5...</div>
            </a>
            <div class="ss-price"><del><span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">&#36;</span>3,599.99</span></del> <ins><span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">&#36;</span>2,520.00</span></ins></div>

            <p>32 Channel Digital Mixer</p>
          </a>
        </div>
        <!-- end col-md-12 -->
      </div>
      <!-- end row matched -->

      <div class="row banner-wrapper">
        <div class="col-md-12">
          <div class="matched-banner">Matched for You</div>
        </div>
        <!-- end col-md-12-->
      </div>
      <!-- end row banner -->

    </div>
    <!-- end col-md-3 ss-product-->


    <div class="col-xs-12 col-sm-12 col-md-3 ss-product">
      <div class="row not-matched">
        <div class="col-xs-12 col-sm-12 col-md-12 product-container">
          <a href="http://solvesunday.wpengine.com/product/hosa-pro-mic-cable-rean-xlr3f-to-xlr3m-20-awg-x-2-ofc-90-ofc-braid-5hmic-005/" class="woocommerce-LoopProduct-link"><img width="300" height="300" src="http://solvesunday.wpengine.com/wp-content/uploads/2016/12/HOSA-Pro-Mic-Cable-REAN-XLR3F-to-XLR3M-20-AWG-x-2-OFC-90-OFC-Braid-5-HMIC-005-300x300.jpg" class="attachment-shop_catalog size-shop_catalog wp-post-image"
              alt="HOSA - Pro Mic Cable, REAN XLR3F to XLR3M, 20 AWG x 2 OFC, 90 % OFC Braid, 5&#039; (HMIC-005)" title="HOSA - Pro Mic Cable, REAN XLR3F to XLR3M, 20 AWG x 2 OFC, 90 % OFC Braid, 5&#039; (HMIC-005)" srcset="http://solvesunday.wpengine.com/wp-content/uploads/2016/12/HOSA-Pro-Mic-Cable-REAN-XLR3F-to-XLR3M-20-AWG-x-2-OFC-90-OFC-Braid-5-HMIC-005-300x300.jpg 300w, http://solvesunday.wpengine.com/wp-content/uploads/2016/12/HOSA-Pro-Mic-Cable-REAN-XLR3F-to-XLR3M-20-AWG-x-2-OFC-90-OFC-Braid-5-HMIC-005-150x150.jpg 150w, http://solvesunday.wpengine.com/wp-content/uploads/2016/12/HOSA-Pro-Mic-Cable-REAN-XLR3F-to-XLR3M-20-AWG-x-2-OFC-90-OFC-Braid-5-HMIC-005-180x180.jpg 180w, http://solvesunday.wpengine.com/wp-content/uploads/2016/12/HOSA-Pro-Mic-Cable-REAN-XLR3F-to-XLR3M-20-AWG-x-2-OFC-90-OFC-Braid-5-HMIC-005.jpg 600w"
              sizes="(max-width: 300px) 100vw, 300px" />
            <a href="http://solvesunday.wpengine.com/product/hosa-pro-mic-cable-rean-xlr3f-to-xlr3m-20-awg-x-2-ofc-90-ofc-braid-5hmic-005/">
              <div class="meta">HOSA &#8211; Pro Mic Cable, REAN XLR3F to XLR3M, 20 AWG x 2 OFC, ...</div>
            </a>
            <div class="ss-price"><span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">&#36;</span>5.35</span>
            </div>

            <p>REAN XLR3F to XLR3M.</p>
          </a>
        </div>
        <!-- end col-md-12 -->
      </div>
      <!-- end row not-matched -->
    </div>

Here is the relative CSS for the PAGE:

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
 margin: 0;
 padding: 0;
 border: 0;
 font-size: 100%;
 font: inherit;
 vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, main {
 display: block;
}
body {
 line-height: 1;
}
ol, ul {
 list-style: none;
}
blockquote, q {
 quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
 content: '';
 content: none;
}
table {
 border-collapse: collapse;
 border-spacing: 0;
}

Any help would be greatly appreciated. I've looked all through the forums and it seems like this is an often ran into problem but none of the other solutions have helped so I'm posting in hope that a custom solution can be found. If I haven't given enough information or code, let me know.

UPDATED CODE SNIPPETS

Here is what's included in the Style.css

.ss-product .ss-price {
  color: #aa7d29;
  font-size: 1.5rem;
  font-weight: 700;
  position: absolute;
  bottom: 10px;
}

And

.matched .ss-price {
 color: #aa7d29;
    font-size: 1.5rem;
    font-weight: 700;
    position: absolute;
    bottom:10px;
}

And

.cart-table .recommended .rec-product .ss-price {
  color: #aa7d29;
  font-size: 1.2rem;
  font-weight: 700;
  padding: 2% 4%;
}

Those are the only times that it's mentioned anywhere in the CSS except for in the WooCommerce.css which is mainly just changing for small devices.

I'll take a stab at the ideas from @S.M.

score 0 · Answer 1 · answered May 25 '17 at 21:06

First, there is not enough code to recreate your problem but regarding the attached screenshot I think I understood the point here.

Second, the problem is caused (maybe due to other factors as well) that your order in the html body does not match the one on screen. What I am saying is, that the html goes like this:

Image
Price
Description
"Matched for you"

However, the in the picture the price stands UNDER the description. Now, because the "Matched for you is added", this price is pushed towards its original position, BEFORE the description. There is your problem. Somewhere, there must be the code defining properties for:

div.ss-price{}

If you change values is here, you can adjust the position so it can be read again.

For example:

div.ss-price{
position:absolute;
margin-top:5px;
}

This is by far not the best solution, but it might work!

The position:absolute will put the price where it originally belonged (before the description) and the margin-top will readjust its position. But pay attention, that the third price-item is also part of this div class and the changes will affect this item as well!

If this does not help, you have to show us more code so we might find other parameters that could be fixed!

Thanks! I've done a search for div.ss-price and nothing comes up. That might be my problem. I WAS able to find quite a few references to just ".ss-price" I've added those to the original post. — Sean Walker, May 26 '17 at 17:04

Keep a inside a from overlapping when resizing browser

1 Answers1

Keep a
inside a
from overlapping when resizing browser