Columns with content align keep last div aligned to bottom? - html

Question

I have 3 columns with content and I managed to align the last div to bottom, by giving a fixed height to the column. Is there a better method since this won't work if someone will change the content, add more text or less text.
.column {
width: 33%;
float: left;
background: #ccc;
height: 350px;
position: relative;
}
.btn {
position: absolute;
left: 0;
right: 0;
bottom: 0;
text-align: center;
padding: 10px;
}
My Fiddle: Fiddle

Answer 1

Flexbox layout is a good solution.
The body element has row layout (it contains the 3 columns), each column has column layout (obvious). and inside the column the content grows to fill the space remaining.
I removed the absolute positioning from the .btn class, so it would take the space inside the coulmn.
body {
display: flex;
flex-direction: row;
}
.column {
width: 33%;
float: left;
background: #ccc;
min-height: 350px;
position: relative;
display: flex;
flex-direction: column;
}
.content {
flex-grow: 1;
padding: 0 5px;
}
.btn {
text-align: center;
padding: 10px;
}
<div class="column">
<div class="title">
<h2>Title 1</h2>
</div>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni iure repudiandae asperiores obcaecati accusantium, sapiente, tenetur dolores fugit omnis repellat dolorem iusto mollitia recusandae quidem perspiciatis dolore, ipsum suscipit ab?
</div>
<div class="btn">Click Me!</div>
</div>
<div class="column">
<div class="title">
<h2>Title 2</h2>
</div>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni iure repudiandae asperiores obcaecati accusantium, sapiente, tenetur dolores fugit omnis repellat dolorem iusto mollitia recusandae quidem perspiciatis dolore, ipsum suscipit ab? Lorem ipsum
dolor sit amet, consectetur adipisicing elit. Magni iure repudiandae asperiores obcaecati accusantium, sapiente, tenetur dolores fugit omnis repellat dolorem iusto mollitia recusandae quidem perspiciatis dolore, ipsum suscipit ab?
</div>
<div class="btn">Click Me!</div>
</div>
<div class="column">
<div class="title">
<h2>Title 3</h2>
</div>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni iure repudiandae asperiores obcaecati accusantium, sapiente, tenetur dolores fugit omnis repellat dolorem iusto mollitia recusandae quidem perspiciatis dolore, ipsum suscipit ab?
</div>
<div class="btn">Click Me!</div>
</div>

Answer 2

If you need with fixed height for columns.
Here is the code
.column {
width: 33%;
float: left;
background: #ccc;
height: 350px;
position: relative;
}
.btn {
text-align: center;
padding: 10px;
}
.content{background:#f5f5f5;height:240px;overflow-x:hidden;overflow-y:auto;}
<div class="column">
<div class="title">
<h2>Title 1</h2>
</div>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni iure repudiandae asperiores obcaecati accusantium, sapiente, tenetur dolores fugit omnis repellat dolorem iusto mollitia recusandae quidem perspiciatis dolore, ipsum suscipit ab?
</div>
<div class="btn">Click Me!</div>
</div>
<div class="column">
<div class="title">
<h2>Title 2</h2>
</div>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni iure repudiandae asperiores obcaecati accusantium, sapiente, tenetur dolores fugit omnis repellat dolorem iusto mollitia recusandae quidem perspiciatis dolore, ipsum suscipit ab?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni iure repudiandae asperiores obcaecati accusantium, sapiente, tenetur dolores fugit omnis repellat dolorem iusto mollitia recusandae quidem perspiciatis dolore, ipsum suscipit ab?
</div>
<div class="btn">Click Me!</div>
</div>
<div class="column">
<div class="title">
<h2>Title 3</h2>
</div>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni iure repudiandae asperiores obcaecati accusantium, sapiente, tenetur dolores fugit omnis repellat dolorem iusto mollitia recusandae quidem perspiciatis dolore, ipsum suscipit ab?
</div>
<div class="btn">Click Me!</div>
</div>
Otherwise if you want to last div always bottom to above elements not as fixed.
Here is the code->
.column {
width: 33%;
float: left;
background: #ccc;
height: auto;
position: relative;
}
.btn {
text-align: center;
padding: 10px;
}
.content{background:#f5f5f5;}
<div class="column">
<div class="title">
<h2>Title 1</h2>
</div>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni iure repudiandae asperiores obcaecati accusantium, sapiente, tenetur dolores fugit omnis repellat dolorem iusto mollitia recusandae quidem perspiciatis dolore, ipsum suscipit ab?
</div>
<div class="btn">Click Me!</div>
</div>
<div class="column">
<div class="title">
<h2>Title 2</h2>
</div>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni iure repudiandae asperiores obcaecati accusantium, sapiente, tenetur dolores fugit omnis repellat dolorem iusto mollitia recusandae quidem perspiciatis dolore, ipsum suscipit ab?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni iure repudiandae asperiores obcaecati accusantium, sapiente, tenetur dolores fugit omnis repellat dolorem iusto mollitia recusandae quidem perspiciatis dolore, ipsum suscipit ab?
</div>
<div class="btn">Click Me!</div>
</div>
<div class="column">
<div class="title">
<h2>Title 3</h2>
</div>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni iure repudiandae asperiores obcaecati accusantium, sapiente, tenetur dolores fugit omnis repellat dolorem iusto mollitia recusandae quidem perspiciatis dolore, ipsum suscipit ab?
</div>
<div class="btn">Click Me!</div>
</div>