How to align contents in different containers using only css


Tags: css,twitter-bootstrap,css3,twitter-bootstrap-3

Problem :

I am trying to build a Pricing Tablesimilar to one shown below.

on-full-width

Following are my requirements

  • The Get Started button should be on same horizontal level
  • The containers have to be of same height irrespective of the content (The no. of points & length of description in the two can vary as shown)
  • These two containers should stack one above other on low screen width
here is a minimum snippet for my current solution using JS

findTallest = function () {
  var tallestByGroupNum = {}
  $(".item-contents").each(
    function () {
      var grpNum = $(this).parent().attr('data-group-num');
      // !< instead of > to support undefined values
      if (!($(this).height() < tallestByGroupNum[grpNum] )) {
        tallestByGroupNum[grpNum] = $(this).height();
      }
    }
  );

  $(".item-box").height(
    function () {
      return tallestByGroupNum[$(this).attr('data-group-num')];
    }
  );
};

$(window).resize(findTallest);
findTallest();
/* Put your css in here */

.item-box {
  border: 1px solid red;
}
.pricingCard {
  border: 2px solid red;
  text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>



<div class="container">
  <div class="col-xs-6 pricingCard">
    <h1>Free</h1>

    <div class="item-box" data-group-num="1">
      <div class="item-contents">
        Long long long long long long long long long long long long long long long long long description
      </div>
    </div>

    <button class="btn btn-primary">Get Started</button>

    <div class="item-box" data-group-num="2">
      <div class="item-contents">
        <div>Point</div>
        <div>Point</div>
        <div>Point</div>
      </div>
    </div>

    <button class="btn btn-primary">Get Started</button>
  </div>

  <div class="col-xs-6 pricingCard">
    <h1>Premium</h1>

    <div class="item-box" data-group-num="1">
      <div class="item-contents">
        Short description
      </div>
    </div>

    <button class="btn btn-primary">Get Started</button>

    <div class="item-box" data-group-num="2">
      <div class="item-contents">
        <div>Point</div>
        <div>Point</div>
        <div>Point</div>
        <div>Point</div>
        <div>Point</div>
        <div>Point</div>
      </div>
    </div>

    <button class="btn btn-primary">Get Started</button>
  </div>
</div>

To explain the problem, here's the snippet exluding the JS code. Note that the buttons don't align properly as before.

Also the solution suggested in the comments are similar to this only.

/* Put your css in here */

.item-box {
  border: 1px solid red;
}
.pricingCard {
  border: 2px solid red;
  text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>



<div class="container">
  <div class="col-xs-6 pricingCard">
    <h1>Free</h1>

    <div class="item-box" data-group-num="1">
      <div class="item-contents">
        Long long long long long long long long long long long long long long long long long description
      </div>
    </div>

    <button class="btn btn-primary">Get Started</button>

    <div class="item-box" data-group-num="2">
      <div class="item-contents">
        <div>Point</div>
        <div>Point</div>
        <div>Point</div>
      </div>
    </div>

    <button class="btn btn-primary">Get Started</button>
  </div>

  <div class="col-xs-6 pricingCard">
    <h1>Premium</h1>

    <div class="item-box" data-group-num="1">
      <div class="item-contents">
        Short description
      </div>
    </div>

    <button class="btn btn-primary">Get Started</button>

    <div class="item-box" data-group-num="2">
      <div class="item-contents">
        <div>Point</div>
        <div>Point</div>
        <div>Point</div>
        <div>Point</div>
        <div>Point</div>
        <div>Point</div>
      </div>
    </div>

    <button class="btn btn-primary">Get Started</button>
  </div>
</div>

Again to emphasis on the problem here's the comparison enter image description here

Currently I am using javascript to achieve this. I detect the tallest element and then set the height of the parent container to that.

Here the link to the plnkr on my current implmentation is JS.

Can this be done in css alone (using some bootstrap classes).



Solution :

With flexbox, I'd do something like this:

* {
  box-sizing: border-box;
}

.pricing {
  background: #eee;
  display: flex;
  flex-direction: column;
  padding: 2em 0;
}
@media (min-width: 48em) {
  .pricing {
    flex-direction: row;
    flex-wrap: wrap;
  }
}
.pricing .block {
  display: flex;
  justify-content: center;
  flex: 1 1 50%;
}
@media (max-width: 48em) {
  .pricing .block {
    flex: 1;
  }
  .pricing .block:nth-child(odd) {
    order: -1;
  }
  .pricing .block:nth-child(2) {
    margin-top: 2em;
  }
}
.pricing header,
.pricing ul {
  background-color: white;
  box-shadow: 0 0 0 1px silver;
  padding: 1em;
  width: 80%;
}
.pricing header {
  display: flex;
  flex-direction: column;
}
.pricing button {
  margin-top: auto;
}

ul {
  margin: 0;
}
ul li {
  margin-left: 1em;
}

h1,
h2 {
  margin: 0.125em 0;
}

button {
  font: inherit;
}
<div class="pricing">
  <div class="block">
    <header>
      <h1>Free</h1>
      <h2>0$</h2>
      <p>short description</p>
      <button>Get Started</button>
    </header>
  </div>
  <div class="block">
    <header>
      <h1>Premium</h1>
      <h2>5$</h2>
      <p>long description long description long description long description long description long description</p>
      <button>Get Started</button>
    </header>
  </div>
  <div class="block">
    <ul>
      <li>Point 1</li>
      <li>Point 2</li>
      <li>Point 3</li>
    </ul>
  </div>
  <div class="block">
    <ul>
      <li>Point 1</li>
      <li>Point 2</li>
      <li>Point 3</li>
      <li>Point 4</li>
      <li>Point 5</li>
      <li>Point 6</li>
      <li>Point 7</li>
    </ul>
  </div>
</div>


    CSS Howto..

    How can I fit the iframe height at 100%?

    How can mono social icon work without a class per icon?

    How to avoid overlapping text using CSS?

    How do you use CSS to make a group of images that flow over the edges of the browser window?

    jquery how to add image from computer

    How can I do the following thing without inline styling?

    How to add two lines of text inside a DIV

    how to switch to another view using css class on click in angularjs using ngclass

    How to add missing browser-specific css declaration properties and prefixes to epub [closed]

    How to display a div forcefully

    How to make all elements in one line?

    How can i learn CSS easily?

    How compatible is the new Microsoft edge browser? [closed]

    How can I style jQuery-UI autocomplete differently than jQuery-UI tabs?

    How does Slick js carousel behave width custom css?

    How to make partial scrolling div?

    How to hide the div after sometime in angular or css?

    CSS how to get a div to the right side and a div exactly in the middle?

    Why do small spaces keep showing up in my web pages?

    How to correct checkbox position, when it is one the same page with jQuery UI input text?

    How to center a span inside a TD?

    How to set height for elements in a

    How to fix IE support for line break using CSS pseudo-element?

    How to Make Hover Background Fade Smoothly In and Out?

    How to give reference to static resources like css,images,java script in JSP?

    How to remove all the borders of a selectbox?

    how to load different css files with different screen sizes?

    How can I center the nav menu items using bootstrap 3?

    How do I increase the spacing between different parts of blockquotes with CSS?

    How to achieve image changing on hover?