0

I am making small boxes that have a header and a text. Both of them dynamically change. So header can be longer than expected. It can be on one line, two lines, three lines etc. But I need for the text to move, so it all starts at the same position in all boxes like on the image below. Right now I am achieving this result using JsAlign, but the cons are that it waits for the page to load and then the content jumps to its place. Is there a way to do it using CSS only? I thought about using flex but that did not get me anywhere. I tried to use a table, but that would mean I have a row just for the icon, row for headers and row for the text. And since the data is coming from the DB, I would have to have 3 cycles and it would not be responsive. Do you have any ideas how to achieve it?

enter image description here

Daniel Sixl
  • 2,488
  • 2
  • 16
  • 29
Arcane
  • 669
  • 1
  • 10
  • 25
  • 1
    Flex should work, try posting the code you tried using flex boxes. – Nandu Kalidindi Oct 30 '17 at 08:26
  • Try to give min-height for the header part, that will align the text length. – Manpreet Matharu Oct 30 '17 at 09:44
  • 1
    Very closely related: https://stackoverflow.com/questions/46816752/equal-height-of-elements-inside-grid-item-with-css-grid-layout/46890585#46890585 – Danield Oct 30 '17 at 14:11
  • But since every "tile" is also in a grid, it has no information about each other and thus cannot calculate the heights properly. Also, the solution Daniel posted is neat, but only supported in Firefox. I need this to be supported in Chrome/FF/IE11/Safari – Arcane Oct 31 '17 at 08:08

1 Answers1

0

Even using flex box, I only got it working with a fixed height value for the "top part" of the box.

Anybody has an idea? I would be really interested in getting this to work without a fixed value.

html {
  box-sizing: border-box;
}

*, ::before, ::after {
  box-sizing: inherit;
}

body {
  background-color: #FFF;
  font-family: sans-serif;
  padding: 30px;
}

.container {
  max-width: 1024px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
}

.content-box {
  width: 230px;
  background-color: #f6f6f7;
  padding: 30px;
  margin: 0 5px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.content-box .fa, .content-box .link {
  color: #e81500;
}
.content-box a {
  display: block;
  margin: 30px 0 0 0;
  text-decoration: none;
  font-weight: 700;
}
.content-box a i {
  padding-right: 0.2em;
}
.content-box h3 {
  font-size: 16px;
}
.content-box p {
  margin: 0 0 1em 0;
}
.content-box p:last-of-type {
  margin-bottom: 0;
}
.content-box__top {
  height: 120px; /* <-- fixed value :( */
  overflow: hidden;
  margin-bottom: 15px;
  padding-bottom: 15px;
}
.content-box__bottom {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="container">

    <div class="content-box">
        <div class="content-box__top">
          <i class="fa fa-4x fa-calendar" aria-hidden="true"></i>
          <h3>Our example heading goes here</h3>
        </div>
        <div class="content-box__bottom">
          Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
                  <a href="#" class="link"><i class="fa fa-arrow-right" aria-hidden="true"></i> Link</a>
        </div>
    </div>
    
    <div class="content-box">
        <div class="content-box__top">
          <i class="fa fa-4x fa-line-chart" aria-hidden="true"></i>
          <h3>Our heading</h3>
        </div>
        <div class="content-box__bottom">
          <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
          <a href="#" class="link"><i class="fa fa-arrow-right" aria-hidden="true"></i> Link</a>
        </div>
    </div>
    
    
</div>
Daniel Sixl
  • 2,488
  • 2
  • 16
  • 29