How can align these elements?CSS

1 Views

I have this link:

link

Read More

At the bottom you will find some products that are not aligned as I want.

I put a picture more clearly understand how they want to be aligned

http://i59.tinypic.com/1zfh0dc.jpg

CODE PHP: 

<div class="container">
                <?php
                    $args = array(
                      'post_type' => 'product',
                                      'posts_per_page' => 6,
                      );
                    $products = new WP_Query( $args );
                    if( $products->have_posts() ) {
                      while( $products->have_posts() ) {
                        $products->the_post();
                        ?>
                        <?php
                            $check = get_field('featured_product');
                            if($check[0] == 'Check'){ ?>
                                <div class="featured_product">
                                    <?php the_post_thumbnail('featured'); ?>
                                    <div class="featured_content center">
                                        <h3><?php the_title() ?></h3>
                                        <div class='content'>
                                            <?php the_excerpt() ?>
                                        </div>
                                        <a href="?page_id=26" class="get_quote">get quote</a>
                                    </div>
                                </div>
                            <?php } ?>
                        <?php
                      }
                    }
                    else {
                      echo 'No products!';
                    }
                  ?>
                </div>
            </div>

CODE CSS: 

.featured_product{
  width:28%;
  float:left;
  max-width:300px;
  min-width:300px;
  margin-right:6%;
  border:3px solid #d3d1d1;
  margin-bottom:30px;
  border-radius:0 0 20px 20px;
  padding-bottom:30px;
height:468px;
}

I have tried to make these changes but still does not align as they should. 

.featured_content{
  padding:0 30px;
  position: absolute;
  bottom: 0;
}



.featured_product{position:relative;}

No matter how much content is added, it must be lined all the same. As you can see, products that have no image or long text are not displayed properly.

Can you help me find a solution to this problem?

Thanks in advance!

Post Views: 1

Related posts

6 comments

  1. You can use absolute position and set the box-sizing of .featured_content to border-box to makes it rendered correctly. Try this:

    .featured_product {
  position: relative;
}
.featured_content {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding:0 30px;
  position: absolute;
  bottom: 30px;
  left: 0;
}

    EDIT

    If you want to makes the title and content in same alignment, and the quote button in same alignment, you need to wrap the image with div and add static height to that div. Also wrap the get_quote button and set the wrapper to absolute position. Example:

    HTML

    <div class="featured_product">
  <div class="image">
    <img>
  </div>
  <div class="featured_content">
    <h3></h3>
    <p class="content"></p>
  </div>
  <div class="get_quote_wrap">
    <a class="get_quote"></a>
  </div>
</div>

    CSS

    .featured_product {
  position: relative;
}
.featured_product .image {
  height: 200px;
  margin-bottom: 20px;
}
.featured_product .get_quote_wrap {
  display: block;
  width: 100%;
  box-sizing: border-box;
  position: absolute;
  bottom: 30px;
  left: 0;
  text-align: center;
}

  2. If you are seeking for an easy answer then you can go with an img div where either you can put image or you can give min height. In your example, i added this and it was ok

    <div style="min-height:200px;"></div>

  3. You can use it in parent class, to get all in center

    display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-items: center;

  5. All you need is the .content div should have minimum height, so, that the Get Quote should be vertically aligned accordingly.

    Apply this style rule:

    .content {min-height: 165px;}

    Adjust the height accordingly.

  6. Add

    position: relative;
text-align: center;

    in to your

    .featured_product{}

    and

    position: absolute;
bottom: /* your offset */;

    in

    .featured_content{}

    position relative cannot float just put a div around it and make it float left.

Comments are closed.