Making height of the border equal for all columns following the longest one

Question

Is it possible to make all borders-right to be equal in height following the longest one?

Here is what I have so far

.mk-product-holder {
    position: relative;
}

.woocommerce .mk-product-holder {
    z-index: 10;
}


.mk-product-loop.compact-layout .mk-product-holder {
    border: 1px solid #e3e3e3;
    background-color: #fff;
}

#responsive-form {
    max-width: 100%;
    margin: 0 auto;
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
}

.clearfix::after, .clearfix::before {
    content: " ";
    display: table;
}

div {
    margin: 0;
    padding: 0;
    border: 0;
    vertical-align: baseline;
    font-size: 100%;
}

.master-holder div {
    box-sizing: border-box;
}

.form-row {
    width: 100%;
}

.clearfix::after {
    content: "";
    display: table;
    clear: both;
}

.column-four {
    min-height: 330px;
    width: 25%;
    float: left;
    position: relative;
    padding: 0rem;
}

.column-full {
    float: left;
    position: relative;
    padding: 0rem;
    width: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

div {
    margin: 0;
    padding: 0;
    border: 0;
    vertical-align: baseline;
    font-size: 100%;
}

<article class="item mk--col mk--col--12-12 post-1228 product type-product status-publish has-post-thumbnail product_cat-plugs first instock shipping-taxable product-type-simple item--loaded" style="position: absolute;backface-visibility: hidden;left: 0px;">
 <div class="mk-product-holder">
  <div id="responsive-form" class="clearfix">
   <div class="form-row">
    <div class="column-four" style="border-right: 1px solid #d8d8d8; padding-left: 10px; padding-right: 10px;width:250px;">
     <div class="column-full">
      <div class="borderbottom">
      <br>
       <h2 class="producttitle">Product Name</h2>
      </div>
     </div>
     <div class="column-full">
      <div class="greybg">
      <br>
       <img width="152" height="135" src="https://via.placeholder.com/150" class="attachment-full size-full wp-post-image" alt="" itemprop="image"><br>
      </div>
     </div>
    </div>
    <div class="column-four" style="width:250px;border-right: 1px solid #d8d8d8; padding-left: 10px; padding-right: 10px;">
     <div class="column-full">
      <div class="borderbottom">
       <h2 class="producttitle" style="font-size: 20px!important;border-bottom: 1px solid #d8d8d8;  padding-bottom: 20px;">
       <br>
        <strong>Description</strong></h2>
                <p>
                Some very long text <br>
                Some very long text <br>
                Some very long text <br>
                Some very long text <br>
                Some very long text <br>Some very long text <br>Some very long text <br>Some very long text <br>Some very long text <br>Some very long text <br>Some very long text <br>Some very long text <br>Some very long text <br>Some very long text <br>Some very long text <br>Some very long text <br>Some very long text <br>Some very long text <br>Some very long text <br>Some very long text <br>Some very long text 
                </p>
      </div>
     </div>
    </div>
   </div>
  </div>
 </div>
</article>

You can see the right border of the Description column is taking the height of the column. I want to make the same for the product name column. Is that possible with current setup?

Here is full working demo on jsfiddle: Here is the full demo: https://jsfiddle.net/7fb4nzek/

score 2 · Accepted Answer · answered Feb 26 '19 at 12:38

You can make something like this.

.mk-product-holder {
    position: relative;
}

.woocommerce .mk-product-holder {
    z-index: 10;
}


.mk-product-loop.compact-layout .mk-product-holder {
    border: 1px solid #e3e3e3;
    background-color: #fff;
}

#responsive-form {
    max-width: 100%;
    margin: 0 auto;
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
}

.clearfix::after, .clearfix::before {
    content: " ";
    display: table;
}

div {
    margin: 0;
    padding: 0;
    border: 0;
    vertical-align: baseline;
    font-size: 100%;
}

.master-holder div {
    box-sizing: border-box;
}

.form-row {
    width: 100%;
}

.clearfix::after {
    content: "";
    display: table;
    clear: both;
}

.column-four {
    min-height: 330px;
    width: 25%;
    float: left;
    position: relative;
    padding: 0rem;
}

.column-full {
    float: left;
    position: relative;
    padding: 0rem;
    width: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

div {
    margin: 0;
    padding: 0;
    border: 0;
    vertical-align: baseline;
    font-size: 100%;
}

<article class="item mk--col mk--col--12-12 post-1228 product type-product status-publish has-post-thumbnail product_cat-plugs first instock shipping-taxable product-type-simple item--loaded" style="position: absolute;backface-visibility: hidden;left: 0px;">
  <div class="mk-product-holder">
    <div id="responsive-form" class="clearfix">
      <div class="form-row">
        <div class="column-four" style="padding-left: 10px; padding-right: 10px;width:250px;">
          <div class="column-full">
            <div class="borderbottom">
            <br>
              <h2 class="producttitle">Product Name</h2>
            </div>
          </div>
          <div class="column-full">
            <div class="greybg">
            <br>
              <img width="152" height="135" src="https://via.placeholder.com/150" class="attachment-full size-full wp-post-image" alt="" itemprop="image"><br>
            </div>
          </div>
        </div>
        <div class="column-four" style="width:250px;border-right: 1px solid #d8d8d8; border-left: 1px solid #d8d8d8; padding-left: 10px; padding-right: 10px;">
          <div class="column-full">
            <div class="borderbottom">
              <h2 class="producttitle" style="font-size: 20px!important;border-bottom: 1px solid #d8d8d8;  padding-bottom: 20px;">
              <br>
                <strong>Description</strong></h2>
                <p>
                Some very long text <br>
                Some very long text <br>
                Some very long text <br>
                Some very long text <br>
                Some very long text <br>Some very long text <br>Some very long text <br>Some very long text <br>Some very long text <br>Some very long text <br>Some very long text <br>Some very long text <br>Some very long text <br>Some very long text <br>Some very long text <br>Some very long text <br>Some very long text <br>Some very long text <br>Some very long text <br>Some very long text <br>Some very long text 
                </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</article>

thanks. This could work but I display multiple products on page and the height of the text is varying so the borders too. — S.I., Feb 26 '19 at 12:55
Border will propotional bigger. Try to increase text, and see it — Andrew Kovalchuk, Feb 26 '19 at 13:01
Yes, but what will happen if I add one more column next to the second one? The border-right of that third column wont match. — S.I., Feb 26 '19 at 13:03
you can set style for that class, but use nth:first-child, nth:last-child to remove first and last border — Andrew Kovalchuk, Feb 26 '19 at 13:09

Making height of the border equal for all columns following the longest one

1 Answers1