Place div below all div's-CodePudding

I'm trying to change the position of text in Wordpress plugin. All I want to do is move text to the bottom of main div. I've tried position: absolute; position:fixed and also clear:both but nothing. Here's my html stucture:

<div class="wc-restaurant-menu-product" data-product-id="1" data-order-type="lightbox" data- quantity="1">
   <div class="wc-restaurant-menu-product-inner">
      <div class="image" style="background-image:url('https://previews.123rf.com/images/fordzolo/fordzolo1506/fordzolo150600296/41026708-example-white-stamp-text-on-red-backgroud.jpg');"></div>
      <div class="details">
         <div class="header">
            <div class="name">Title</div>
            <div class="price"><span class="woocommerce-Price-amount amount"><bdi>21.00&nbsp;<span class="woocommerce-Price-currencySymbol">$</span></bdi></span></div>
            <div class="buy-button">
               <button type="button" class="add icon" aria-label="Add to order"> </button>
            </div>
         </div>
         <div class="description">Some textSome textSome textSome textSome textSome text</div>
      </div>
   </div>
</div>

And jsfiddle with all styles. https://jsfiddle.net/qc5jnmyp/

Full plugin css: https://jsfiddle.net/foutaLj7/

CodePudding user response：

With the current structure, just change some CSS properties and you can move the text to the bottom of the main div.

From your statement in the question, I got that you need to keep your description at the bottom of the div as you already said in the question, which means something like this:

Enter image description here

If this is the case then just use margin-top: auto; on your description div.

Here is the working example for you.

If you need it at the very bottom, then just remove the padding-bottom form details div or if you want something else. Please let me know.

CodePudding user response：

You have to put "description" class div outside of "wc-restaurant-menu-product".

I tried to paste the code but stackoverflow is not very effective at this.

You need to put <div class="description">Some textSome textSome textSome textSome textSome text</div>

After "wc-restaurant-menu-product" closing tag

CodePudding user response：

Use styles according to need

Just put border on the outer container not on the the image .

Instead of putting border on class .wc-restaurant-menu-product-inner put border on class .wc-restaurant-menu-product like this :

.wc-restaurant-menu-product {
  border: 1px solid #f0f0f0;
  border-radius: 3px;
  box-shadow: 0 0 1px rgb(50 50 50 / 6%), 0 1px 3px rgb(50 50 50 / 6%);
  transition: border 0.2s;
  box-sizing: border-box;
}

Also, if wanted text more near to image put margin-top value negative in .description .

.wc-restaurant-menu-product {
  border: 1px solid #f0f0f0;
  border-radius: 3px;
  box-shadow: 0 0 1px rgb(50 50 50 / 6%), 0 1px 3px rgb(50 50 50 / 6%);
  transition: border 0.2s;
  box-sizing: border-box;
}

.wc-restaurant-menu-product .wc-restaurant-menu-product-inner {
  display: flex;
  flex-wrap: nowrap;
  width: 100%;
  height: 100%;
}

.wc-restaurant-menu-product .image {
  flex: 0 0 110px;
  min-height: 110px;
  border-radius: 3px 0 0 3px;
  margin-right: 4px;
  overflow: hidden;
  background-size: cover;
}

.wc-restaurant-menu-product .details {
  flex: 1 1;
  padding: 15px;
  padding-top: 11px;
  display: flex;
  flex-direction: column;
}

.wc-restaurant-menu-product .header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  margin: 0 -8px;
  z-index: auto;
}

.wc-restaurant-menu-product .header>div {
  flex: 1 1;
  margin-top: 4px;
  margin-bottom: 4px;
  margin-left: 8px;
  margin-right: 8px;
}

.wc-restaurant-menu-product .description {
  margin-top: 4px;
  font-size: 0.85em;
  color: #949494;
  line-height: 1.5;
  overflow: hidden;
  margin-top: -25px;
}

<div class="wc-restaurant-menu-product" data-product-id="1" data-order-type="lightbox" data-quantity="1">
  <div class="wc-restaurant-menu-product-inner">
    <div class="image" style="background-image:url('https://previews.123rf.com/images/fordzolo/fordzolo1506/fordzolo150600296/41026708-example-white-stamp-text-on-red-backgroud.jpg');"></div>
    <div class="details">
      <div class="header">
        <div class="name">Title</div>
        <div class="price"><span class="woocommerce-Price-amount amount"><bdi>21.00&nbsp;<span class="woocommerce-Price-currencySymbol">$</span></bdi>
          </span>
        </div>
        <div class="buy-button">
          <button type="button" class="add icon" aria-label="Add to order"> </button>
        </div>
      </div>

    </div>
  </div>
  <div class="description">Some textSome textSome textSome textSome textSome text</div>
</div>