Станислав

В общем, проведя различные тесты и почитав что писали выше, пришел к выводу, что единственно верное решение все-таки скрипт плюс верстка. Вот код скрипта:

$('.products_row').each(function(){
		var arr = new Array;
		$(this).find(".products_grid").each(function(){
			arr.push($(this).height());
		});
		$(this).find(".products_grid").css("height", Math.max.apply(null,arr)+"px");
	});

Этот код решает проблему с одинаковой высотой в IE и Mozilla. То, что ниже - с выравниванием блоков посередине.

Код html:

<div class="products_wrapper">
    <div class="products_row">
        <div class="products_grid"
             style="background-image: url(blah_blah.png);">
            <div class="products_title">
                <p>blah_blah<br>
                    blah_blah<br>
                    blah_blah<br>
                    blah</p>
            </div>
            <div class="products_text">
                <h6>blah_blah</h6>
                <p>blah_blah</p>
            </div>
            <a href="#contact-form" class="products_order">blah_blah</a>
        </div>
        <div class="products_grid"
             style="background-image: url(blah_blah.png);">
            <div class="products_title">
                <p>blah_blah<br>
                    blah_blah<br>
                    blah_blah<br>
                    blah</p>
            </div>
            <div class="products_text">
                <h6>blah_blah</h6>
                <p>blah_blah<br>
                      blah_blah<br>
                      blah_blah<br>
                 </p>
            </div>
            <a href="#contact-form" class="products_order">blah_blah</a>
        </div>
        <div class="products_grid"
             style="background-image: url(blah_blah.png);">
            <div class="products_title">
                <p>blah_blah<br>
                    blah_blah<br>
                    blah_blah<br>
                    blah</p>
            </div>
            <div class="products_text">
                <h6>blah_blah</h6>
                <p>blah_blah<br>
                      blah_blah<br>
                 </p>
            </div>
            <a href="#contact-form" class="products_order">blah_blah</a>
        </div>
    </div>
    <div class="products_row">
        <div class="products_grid"
             style="background-image: url(blah_blah.png);">
            <div class="products_title">
                <p>blah_blah<br>
                    blah_blah<br>
                    blah_blah<br>
                    blah</p>
            </div>
            <div class="products_text">
                <h6>blah_blah</h6>
                <p>blah_blah<br>
                      blah_blah<br>
                      blah_blah<br>
                      blah_blah<br>
                 </p>
            </div>
            <a href="#contact-form" class="products_order">blah_blah</a>
        </div>
        <div class="products_grid"
             style="background-image: url(blah_blah.png);">
            <div class="products_title">
                <p>blah_blah<br>
                    blah_blah<br>
                    blah_blah<br>
                    blah</p>
            </div>
            <div class="products_text">
                <h6>blah_blah</h6>
                <p>blah_blah<br>
                      blah_blah<br>
                      blah_blah<br>
                      blah_blah<br>
                 </p>
            </div>
            <a href="#contact-form" class="products_order">blah_blah</a>
        </div>
    </div>
</div>

Код css (less):

.products_wrapper {
    width: 100%;
    margin: auto;
    .products_row {
      display: inline-table;
      width: 100%;
      padding-bottom: 20px;
      box-sizing: content-box;
      text-align: center;
      .products_grid {
        display: inline-table;
        max-width: 29%;
        min-height: 100%;
        margin: 0 1%;
        padding: 10px;
        cursor: crosshair;
        .products_title {
          display: table-row;
          p {
            padding: 5px;
          }
        }
        .products_text {
          display: table-row;
          min-height: 100%;
          h6, p {
            padding: 5px;
          }
        }
        .products_order {
          display: table-row;
          min-width: 100%;
          height: 35px;
          padding: 10px;
          text-align: center;
          font-size: 26px;
          line-height: 35px;
        }
      }
    }
  }

Многовато вышло в итоге кода, но кому нужно - разберется. Важно! Данный код не является решением для адаптивной верстки под устройства с различными экранами, ее нужно дописать отдельно.

Тут есть три варианта решения, через HTML+CSS, через JS и через PHP.

В первом случае я бы посоветовал вам копать в сторону обрезания содержимого блоков через overflow, overflow-text и так далее. Есть и еще один вариант через HTML, когда вы будете не обрезать блоки, а выстраивать из них такую сетку, где один блок не будет налезать на другой, как у вас это сейчас. Это можно сделать через CSS flexbox.

Во втором случае вы можете как сами написать некий код, который будет изменять текст блоков и/или их размеры, так и воспользоваться различными библиотеками, например - Masonry. Руководство можно сразу взять тут.

В третьем случае все совсем просто - вам нужно текст, который меняется в зависимости от блока, обрезать по длине, выводя первые его 300, например, символов. Чтобы прочитать остальное, можно предлагать пользователю ссылку "Далее..." и перенаправлять его на отдельную страницу объявления, которые у вас уже реализованы.

Есть такое понятие, как вес селектора. Вообще, то, как применяются правила, выглядит примерно так:

Сначала определяется вес селектора.
Потом смотрится, не перебивается ли это !important.
При прочих равных применяются правила, которые расположены в коде последними, тут также учитывается и порядок линкования файлов css.

Исправить ситуацию можно несколькими путями:
1. Попробовать добавить !important.
2. Попробовать увеличить вес селекторов, добавив id.
3. Попробовать уменьшить вес селекторов, которые перебивают нужный код.

Сам развесовка такова (есть по ссылке более подробно):

style="" 1,0,0,0
#id 0,1,0,0
.class 0,0,1,0
[attr=value] 0,0,1,0
LI 0,0,0,1
* 0,0,0,0