1

Here is example code of what I have:

The CSS:

<style>
* {
  box-sizing: border-box;
}

/* Create four equal columns that floats next to each other */
.column {
  float: left;
  width: 25%;
  padding: 10px;
  height: 300px; /* Should be removed. Only for demonstration */
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}
</style>

The Code:

<h2>Four Equal Columns</h2>

<div class="row">
  <div class="column" style="background-color:#aaa;">
    <h2>Column 1</h2>
    <p>Some text..</p>
    <p>Some text..</p>
  </div>
  <div class="column" style="background-color:#bbb;">
    <h2>Column 2</h2>
    <p>Some text..</p>
  </div>
  <div class="column" style="background-color:#ccc;">
    <h2>Column 3</h2>
    <p>Some text..</p>
    <p>Some text..</p>
    <p>Some text..</p>
    <p>Some text..</p>
  </div>
  <div class="column" style="background-color:#ddd;">
    <h2>Column 4</h2>
    <p>Some text..</p>
    <p>Some text..</p>
    <p>Some text..</p>
  </div>
</div>

This is what I don't want:

<div class="row">
  <div class="column" style="background-color:#aaa;">
    <h2>Column 1</h2>
    <h2>Column 1</h2>
    <p>Some text..</p>
    <p>Some text..</p>
  </div>
  <div class="column" style="background-color:#bbb;">
    <h2>Column 2</h2>
    <p>Some text..</p>
  </div>

When you add more titles (h2 tags) into the box, it'll push the text down in that box but the other boxes remain the same. This renders everything uneven, meaning, if there's more text in one box then makes all of the other boxes look weird.

How do I make it so that if one box has a longer title that the other text in the other four boxes will move down their contents to match the height of the box with the most text?

Like this:

example of what I want

I would prefer to do this using only HTML/CSS.

user87826
  • 11
  • 2
  • What is it that you are exactly trying to achieve? What I see on my end is exactly like the image that you posted as "example of what I want". Can you be more thorough and precise, please? More images would be useful. – Aditya Prakash Dec 23 '19 at 16:59
  • I have 4 boxes of divs. Each box has divs inside that contain text (title, paragraph). If any one of the divs in a box should get a lot of text or a long title, it causes the data beneath it to move down. If that happens, then I want the divs in the other three boxes to match the height. – user87826 Dec 23 '19 at 18:29

1 Answers1

0

Take advantage of flexbox and margin-top: auto; for the bottom element, like so: 

.container {
  display: flex;
  justify-content: center;
}

.box {
  display: flex;
  flex-direction: column;
  margin: 20px;
  background: rgba(0, 0, 0, .3);
  padding: 20px;
}

.text {
  margin-top: auto;
}
<div class="container">
  <div class="box">
    <h1 class="title">Title 1</h1>
    <h1 class="title">Title 2</h1>
    <p class="text">Some text some text some text</p>
  </div>
  <div class="box">
    <h1 class="title">Title 1</h1>
    <p class="text">Some text some text some text</p>
  </div>
  <div class="box">
    <h1 class="title">Title 1</h1>
    <p class="text">Some text some text some text</p>
  </div>
  <div class="box">
    <h1 class="title">Title 1</h1>
    <p class="text">Some text some text some text</p>
  </div>
</div>
yerme
  • 810
  • 5
  • 15
  • Interesting; when I implement this solution, all of the text seems to be exactly where it should be in relation to the others, but with one problem: all of the boxes are now stacked on top of the other. Lol, I love coding. – user87826 Dec 23 '19 at 17:30
  • Ok, this solution doesn't work. See this photo: https://ibb.co/ynW4GMw I replaced all of my CSS and HTML to use the exact code you're using and that's what I got. – user87826 Dec 23 '19 at 18:27