1

I have a number of containers with the same width but different height. I would like them to stack-up without leaving too much space below.

Currently they have the following CSS:

.myDiv { width: calc(100% - 67%); float: left; }

What else am I missing to accomplish this?

santa
  • 12,234
  • 49
  • 155
  • 255
  • 1
    There are definitely better methods to accomplish this than float. Look into CSS grid or flexbox. – dmikester1 Mar 06 '19 at 13:54
  • Found a great example using flex: https://codepen.io/cssgirl/pen/NGKgrM – dmikester1 Mar 06 '19 at 13:59
  • @dmikester1 Thanks for the great example. I think I can clean-up it further and get it to work. I see no reason to use media queries with calc() available to me. Cheers! – santa Mar 06 '19 at 14:32

1 Answers1

0

I recommend using grid or flexbox. This is a great example using flex: https://codepen.io/cssgirl/pen/NGKgrM

This is my favorite guide for learning flex: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Here is a cleaned up version from the codepen link:

.container {
 max-width: 1100px;
 margin: 0 auto;
}

.cards {
 display: flex;
 justify-content: space-between;
 flex-wrap: wrap;
 margin-top: 15px;
 padding: 1.5%;
 box-sizing: border-box;
}

.card {
 flex: 0 1 330px;
 position: relative;
 margin-bottom: 20px; 
 padding-bottom: 30px; 
 background: #fefff9;
 color: #363636;
 text-decoration: none;
 }
 .card span {
  display: block;
 }
 .card .card-summary {
  padding: 5% 5% 3% 5%;
 }
 .card .card-header {
  position: relative;
  overflow: hidden;
  border-radius: 4px 4px 0 0;
 }
 .card .card-title {
  background: rgba(157, 187, 63, .85);
  padding: 3.5% 0 2.5% 0;
  font-family: 'Roboto Condensed', sans-serif;
  text-transform: uppercase;
  position: absolute;
  bottom: 0;
  width: 100%;
}
.card .card-title h3 {
 font-size: 1.2em;
 line-height: 1.2;
 padding: 0 3.5%;
 margin: 0;
}

//General styles for page to make it prettier ;P
body {
 background :#f0f0f0;
 font-size: 17px; 
 line-height: 1.4;
 font-family: 'Jaldi', sans-serif;
}
<html>
<body>
<div class="container">
 <div class="cards">
  <a class="card" href="#">
   <span class="card-header">
    <span class="card-title">
     <h3>This is a title for a card</h3>
    </span>
   </span>
   <span class="card-summary">
    A summary will also be present. Usually two to three brief sentences about the content on the detail page.
   </span>
  </a>

  <a class="card" href="#">
   <span class="card-header">
    <span class="card-title">
     <h3>This is a title for a card that is a bit longer in length</h3>
    </span>
   </span>
   <span class="card-summary">
    Each card is created from an &lt;a&gt; tag so the whole card is linked.
   </span>
  </a>
  
  <a class="card" href="#">
   <span class="card-header">
    <span class="card-title">
     <h3>This is a title for a card</h3>
    </span>
   </span>
   <span class="card-summary">
    Using Flexbox is such a an easy, well supported way for grid-style content, such as cards. The cards height will expand to match the longest item.
   </span>
  </a>

  <a class="card" href="#">
   <span class="card-header">
    <span class="card-title">
     <h3>This is a title for a card</h3>
    </span>
   </span>
   <span class="card-summary">
    A summary will also be present. Usually two to three brief sentences about the content on the detail page.
   </span>
  </a>
  
  <a class="card" href="#">
   <span class="card-header">
    <span class="card-title">
     <h3>This is a title for a card</h3>
    </span>
   </span>
   <span class="card-summary">
    Each card is created from an &lt;a&gt; tag so the whole card is linked.
   </span>
  </a>
  
  <a class="card" href="#">
   <span class="card-header">
    <span class="card-title">
     <h3>This is a title for a card</h3>
    </span>
   </span>
   <span class="card-summary">
    Using Flexbox is such a an easy, well supported way for grid-style content, such as cards. The cards height will expand to match the longest item.
   </span>
  </a>

  <a class="card" href="#">
   <span class="card-header">
    <span class="card-title">
     <h3>This is a title for a card</h3>
    </span>
   </span>
   <span class="card-summary">
    A summary will also be present. Usually two to three brief sentences about the content on the detail page.
   </span>
  </a>

  <a class="card" href="#">
   <span class="card-header">
    <span class="card-title">
     <h3>This is a title for a card</h3>
    </span>
   </span>
   <span class="card-summary">
    Each card is created from an &lt;a&gt; tag so the whole card is linked.
   </span>
  </a>

  <a class="card" href="#">
   <span class="card-header">
    <span class="card-title">
     <h3>This is a title for a card</h3>
    </span>
   </span>
   <span class="card-summary">
    Using Flexbox is such a an easy, well supported way for grid-style content, such as cards. The cards height will expand to match the longest item.
   </span>
  </a>
 </div>
</div>
</body>
</html>
dmikester1
  • 1,374
  • 11
  • 55
  • 113