This question already has answers here:
How can you set the height of an outer div to always be equal to a particular inner div?
(2 answers)
Closed 4 months ago.
I have align-items: stretch flexbox and inside this flexbox I have image and some text content.
text content is static and I need height of img to be as same as height of text content.
When I use different imgs with different aspect ratio I see different height on each img but I want the height of all images to be same.
*Please test snippet in fullscreen mode to see the problem
.card {
display: flex;
flex-direction: row;
align-items: stretch;
box-shadow: 0 0 20px 0px rgba(0, 0, 0, 0.1);
margin: 20px;
}
.title {
align-items: center;
display: flex;
flex-wrap: wrap;
font-size: 1.25rem;
font-weight: 700;
letter-spacing: 0.0125em;
line-height: 1.93rem;
word-break: break-all;
}
.title img {
object-fit: cover;
width: 150px;
height: 100%;
}
<div class="card">
<div class="title">
<img
src="https://s3-alpha-sig.figma.com/img/b579/835c/2b73668d5d42b127f5ed4e206c9c6576?Expires=1668384000&Signature=DoZ8O~AWDj6UhiZgP-5njh0zCqIk0ahZTAqvBVDjvyibc0seggNTv9lBjN-Xhkr6g0oiPnKyfGrqyhzfuPYN-S0T132EdQjEp1LH8FpNHmgBm1SyYVoxMQhnyCcsAF762M6~7lQ5SBqsujpbdmxwee6MChnRRrp706gkHXUYml3Mjd3kR7EsqViVjm39GTyW9DEPIer-qFBTQkILSGrkKjM-9zTitycyzO6c9no0PpclhAqpeeta0sz1JxmsSz7tVHQI9CoDLXWc0epbY7zcnhPqOKYqGkGf2~IS0S46x01CSvTDYIWj0dTt-vma4nOavEWShJhKBXwyjyk5VbQoHQ__&Key-Pair-Id=APKAINTVSUGEWH5XD5UA"
alt="alt"
/>
</div>
<div class="content">
<p class="text-caption grey3--text">2day ago</p>
<p class="text-subtitle-1 grey5--text font-weight-medium">some title</p>
<p class="ellipsis">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Id beatae
quia fugiat, minima eos fuga amet tenetur neque officia optio nulla
voluptatem ducimus dolores, cum animi tempore veritatis libero
repellat. Lorem ipsum dolor sit amet consectetur adipisicing elit. Id
beatae quia fugiat, minima eos fuga amet tenetur neque officia optio
</p>
</div>
</div>
<div class="card">
<div class="title">
<img
src="https://s3-alpha-sig.figma.com/img/bb5a/75f4/c083c0a5a79974bd94152c99b0f0d213?Expires=1668384000&Signature=Um5O0ddvXIROx5txgjSCEF1HcQVv2n6PVHdV81zu1KfaqIZUQw3qZDDgdBAjpnSPJ35-taxYHPLFlhV~tIPoxtJMlXFbJpihC6XIKaiyBUyuXJEicoLCm9fKm5UwbbFLJRU63MSHEDJWVYh8sTxAFaAEwNX~XoVgkfgN0c6ozOdImLOc0G8Hs3WYnDiURZ8jglC25XJRb9uPj7hiiL6tdCOWinA2F9uyLGtSxKHi~RU6ESMKgWOGpavQdeJ5M~iIRpkge2Ka2ySerfZh4184XLTxO8EUG-cin-lW7ncGcjiqLtDIXyt2PyQptpTIENAPMH7dSn1TvvpzjFbadavvnQ__&Key-Pair-Id=APKAINTVSUGEWH5XD5UA"
alt="alt"
/>
</div>
<div class="content">
<p class="text-caption grey3--text">2day ago</p>
<p class="text-subtitle-1 grey5--text font-weight-medium">some title</p>
<p class="ellipsis">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Id beatae
quia fugiat, minima eos fuga amet tenetur neque officia optio nulla
voluptatem ducimus dolores, cum animi tempore veritatis libero
repellat. Lorem ipsum dolor sit amet consectetur adipisicing elit. Id
beatae quia fugiat, minima eos fuga amet tenetur neque officia optio
</p>
</div>
</div>
if your text is going to contain the same line heights, you can use em measurements, 1em being 1 line of rem text size, if you plan on having different text contentss and line heights per span, you could also do this by having a class for each image, and then changing the height through those rather than a universal img tag, meaning you can change settings per image, rather than universally in your container.
.card {
display: flex;
flex-direction: row;
align-items: stretch;
box-shadow: 0 0 20px 0px rgba(0, 0, 0, 0.1);
margin: 20px;
}
.title {
align-items: center;
display: flex;
flex-wrap: wrap;
font-size: 1.25rem;
font-weight: 700;
letter-spacing: 0.0125em;
line-height: 1.93rem;
word-break: break-all;
}
.title > img {
object-fit: cover;
width: 150px;
height: 7.25em;
}
<div class="card">
<div class="title">
<img
src="https://s3-alpha-sig.figma.com/img/b579/835c/2b73668d5d42b127f5ed4e206c9c6576?Expires=1668384000&Signature=DoZ8O~AWDj6UhiZgP-5njh0zCqIk0ahZTAqvBVDjvyibc0seggNTv9lBjN-Xhkr6g0oiPnKyfGrqyhzfuPYN-S0T132EdQjEp1LH8FpNHmgBm1SyYVoxMQhnyCcsAF762M6~7lQ5SBqsujpbdmxwee6MChnRRrp706gkHXUYml3Mjd3kR7EsqViVjm39GTyW9DEPIer-qFBTQkILSGrkKjM-9zTitycyzO6c9no0PpclhAqpeeta0sz1JxmsSz7tVHQI9CoDLXWc0epbY7zcnhPqOKYqGkGf2~IS0S46x01CSvTDYIWj0dTt-vma4nOavEWShJhKBXwyjyk5VbQoHQ__&Key-Pair-Id=APKAINTVSUGEWH5XD5UA"
alt="alt"
/>
</div>
<div class="content">
<p class="text-caption grey3--text">2day ago</p>
<p class="text-subtitle-1 grey5--text font-weight-medium">some title</p>
<p class="ellipsis">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Id beatae
quia fugiat, minima eos fuga amet tenetur neque officia optio nulla
voluptatem ducimus dolores, cum animi tempore veritatis libero
repellat. Lorem ipsum dolor sit amet consectetur adipisicing elit. Id
beatae quia fugiat, minima eos fuga amet tenetur neque officia optio
</p>
</div>
</div>
<div class="card">
<div class="title">
<img
src="https://s3-alpha-sig.figma.com/img/bb5a/75f4/c083c0a5a79974bd94152c99b0f0d213?Expires=1668384000&Signature=Um5O0ddvXIROx5txgjSCEF1HcQVv2n6PVHdV81zu1KfaqIZUQw3qZDDgdBAjpnSPJ35-taxYHPLFlhV~tIPoxtJMlXFbJpihC6XIKaiyBUyuXJEicoLCm9fKm5UwbbFLJRU63MSHEDJWVYh8sTxAFaAEwNX~XoVgkfgN0c6ozOdImLOc0G8Hs3WYnDiURZ8jglC25XJRb9uPj7hiiL6tdCOWinA2F9uyLGtSxKHi~RU6ESMKgWOGpavQdeJ5M~iIRpkge2Ka2ySerfZh4184XLTxO8EUG-cin-lW7ncGcjiqLtDIXyt2PyQptpTIENAPMH7dSn1TvvpzjFbadavvnQ__&Key-Pair-Id=APKAINTVSUGEWH5XD5UA"
alt="alt"
/>
</div>
<div class="content">
<p class="text-caption grey3--text">2day ago</p>
<p class="text-subtitle-1 grey5--text font-weight-medium">some title</p>
<p class="ellipsis">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Id beatae
quia fugiat, minima eos fuga amet tenetur neque officia optio nulla
voluptatem ducimus dolores, cum animi tempore veritatis libero
repellat. Lorem ipsum dolor sit amet consectetur adipisicing elit. Id
beatae quia fugiat, minima eos fuga amet tenetur neque officia optio
</p>
</div>
</div>
You have to give height and width to the parent of img.
I have created a snippet for this.
.card {
display: flex;
flex-direction: row;
align-items: stretch;
box-shadow: 0 0 20px 0px rgba(0, 0, 0, 0.1);
margin: 20px;
}
.title {
width: 150px
}
.content{
width: calc(100% - 150px)
}
.title img {
object-fit: cover;
object-position: center;
width: 100%;
height: 100%;
}
<div class="card">
<div class="title">
<img src="https://s3-alpha-sig.figma.com/img/b579/835c/2b73668d5d42b127f5ed4e206c9c6576?Expires=1668384000&Signature=DoZ8O~AWDj6UhiZgP-5njh0zCqIk0ahZTAqvBVDjvyibc0seggNTv9lBjN-Xhkr6g0oiPnKyfGrqyhzfuPYN-S0T132EdQjEp1LH8FpNHmgBm1SyYVoxMQhnyCcsAF762M6~7lQ5SBqsujpbdmxwee6MChnRRrp706gkHXUYml3Mjd3kR7EsqViVjm39GTyW9DEPIer-qFBTQkILSGrkKjM-9zTitycyzO6c9no0PpclhAqpeeta0sz1JxmsSz7tVHQI9CoDLXWc0epbY7zcnhPqOKYqGkGf2~IS0S46x01CSvTDYIWj0dTt-vma4nOavEWShJhKBXwyjyk5VbQoHQ__&Key-Pair-Id=APKAINTVSUGEWH5XD5UA"
alt="alt" />
</div>
<div class="content">
<p class="text-caption grey3--text">2day ago</p>
<p class="text-subtitle-1 grey5--text font-weight-medium">some title</p>
<p class="ellipsis">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Id beatae quia fugiat, minima eos fuga amet tenetur neque officia optio nulla voluptatem ducimus dolores, cum animi tempore veritatis libero repellat. Lorem ipsum dolor sit amet consectetur adipisicing
elit. Id beatae quia fugiat, minima eos fuga amet tenetur neque officia optio
</p>
</div>
</div>
<div class="card">
<div class="title">
<img src="https://s3-alpha-sig.figma.com/img/bb5a/75f4/c083c0a5a79974bd94152c99b0f0d213?Expires=1668384000&Signature=Um5O0ddvXIROx5txgjSCEF1HcQVv2n6PVHdV81zu1KfaqIZUQw3qZDDgdBAjpnSPJ35-taxYHPLFlhV~tIPoxtJMlXFbJpihC6XIKaiyBUyuXJEicoLCm9fKm5UwbbFLJRU63MSHEDJWVYh8sTxAFaAEwNX~XoVgkfgN0c6ozOdImLOc0G8Hs3WYnDiURZ8jglC25XJRb9uPj7hiiL6tdCOWinA2F9uyLGtSxKHi~RU6ESMKgWOGpavQdeJ5M~iIRpkge2Ka2ySerfZh4184XLTxO8EUG-cin-lW7ncGcjiqLtDIXyt2PyQptpTIENAPMH7dSn1TvvpzjFbadavvnQ__&Key-Pair-Id=APKAINTVSUGEWH5XD5UA"
alt="alt" />
</div>
<div class="content">
<p class="text-caption grey3--text">2day ago</p>
<p class="text-subtitle-1 grey5--text font-weight-medium">some title</p>
<p class="ellipsis">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Id beatae quia fugiat, minima eos fuga amet tenetur neque officia optio nulla voluptatem ducimus dolores, cum animi tempore veritatis libero repellat. Lorem ipsum dolor sit amet consectetur adipisicing
elit. Id beatae quia fugiat, minima eos fuga amet tenetur neque officia optio
</p>
</div>
</div>
Related
two h4, img and p tags are grouped in separate < div>s and I've used float for img, used to separate from each other but still they overlap.
https://i.stack.imgur.com/SUxli.png
this is the image with the output.
I'm new to this, can anybody please help. Thank you.
img {
width: 50%;
height: auto;
margin: 20px 10px 20px 0px;
/* float: left; */
}
.service {
margin: 20px auto 20px auto;
text-align: left;
line-height: 2;
}
<div class="service">
<h4>Lorem ipsum dolor sit amet</h4>
<img src="image.jfif" alt="">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus ab nulla dolorum autem nisi officiis blanditiis voluptatem hic, assumenda aspernatur facere ipsam nemo ratione cumque magnam enim fugiat reprehenderit expedita.</p>
</div>
<br>
<div class="service">
<h4>Lorem ipsum dolor sit amet</h4>
<img src="image.jfif" alt="">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus ab nulla dolorum autem nisi officiis blanditiis voluptatem hic, assumenda aspernatur facere ipsam nemo ratione cumque magnam enim fugiat reprehenderit expedita.</p>
</div>
I would try nesting your code in a container that is flexed with a column flex-direction. Then I would put your <h4>'s before the service div and flex that div also, but use a flex-direction: row; See the CSS changes I made.
.container {
display: flex;
flex-direction: column;
}
p {
padding: 10px;
width: 500px;
margin: auto;
}
img {
width: 50%;
height: auto;
/* float: left; */
}
.service {
text-align: left;
line-height: 2;
display: flex;
flex-direction: row;
}
<div class="container">
<h4>Lorem ipsum dolor sit amet</h4>
<div class="service">
<img src="https://dummyimage.com/600x300/000/fff" alt="">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus ab nulla dolorum autem nisi officiis blanditiis voluptatem hic, assumenda aspernatur facere ipsam nemo ratione cumque magnam enim fugiat reprehenderit expedita.</p>
</div>
<br>
<h4>Lorem ipsum dolor sit amet</h4>
<div class="service">
<img src="https://dummyimage.com/600x300/000/fff" alt="">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus ab nulla dolorum autem nisi officiis blanditiis voluptatem hic, assumenda aspernatur facere ipsam nemo ratione cumque magnam enim fugiat reprehenderit expedita.</p>
</div>
</div>
I tried to display information in form of cards. Each cards is inside ordered list li. On adding more card in form of li, the content goes out of page from top. How can I set the height to adjust automatically according to the number of cards.
Html code
<body>
<section>
<div class="leftBox">
<div class="content">
<h1>Events</h1>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae quia atque cupiditate commodi
nihil
cum? Autem rem voluptates aperiam. Est non dolor, unde quam laborum eveniet quidem doloribus
iure
ad!
</p>
</div>
</div>
<div class="events">
<ul>
<li>
<div class="time">
<h2>2<br><span>April</span></h2>
</div>
<div class="details">
<h3>Celestial</h3>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Inventore nam veritatis facere
deleniti corporis deserunt doloribus maxime.
</p>
View Details
</div>
<div style="clear: both;"></div>
</li>
<li>
<div class="time">
<h2>2<br><span>April</span></h2>
</div>
<div class="details">
<h3>Celestial</h3>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Inventore nam veritatis facere
deleniti corporis deserunt doloribus maxime.
</p>
View Details
</div>
<div style="clear: both;"></div>
</li>
</ul>
</div>
</section>
</body>
Corresponding CSS
body{
margin: 0;
padding: 0;
font-family: 'Poppins', sans-serif;
}
section{
width: 100%;
height: 100vh;
background: #323a45;
background-size: cover;
}
``
Can you please check the below code? Hope it will work for you. We have used display flex property to create cards element, it seems like you have used float element because of float it creates height alignment issue. We provide you two alignment structure so you can use any of according to your convenience.
Please refer to this link: https://jsfiddle.net/yudizsolutions/1vLqr6uo/2/
body {
margin: 0;
padding: 0;
font-family: 'Poppins', sans-serif;
}
section {
width: 100%;
height: 100vh;
/* background: #323a45;*/
background-size: cover;
}
ul {
display: flex;
justify-content: center;
flex-wrap: wrap;
}
ul li {
width: 33.33%;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.events.copy ul li {
display: block;
}
<body>
<section>
<div class="leftBox">
<div class="content">
<h1>Events</h1>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae quia atque cupiditate commodi nihil cum? Autem rem voluptates aperiam. Est non dolor, unde quam laborum eveniet quidem doloribus iure ad!
</p>
</div>
</div>
<div class="events">
<ul>
<li>
<div>
<div class="time">
<h2>2<br><span>April</span></h2>
</div>
<div class="details">
<h3>Celestial</h3>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Inventore nam veritatis facere deleniti corporis deserunt doloribus maxime.
</p>
</div>
</div>
View Details
</li>
<li>
<div>
<div class="time">
<h2>2<br><span>April</span></h2>
</div>
<div class="details">
<h3>Celestial</h3>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Inventore nam veritatis facere deleniti corporis deserunt doloribus maxime.
</p>
</div>
</div>
View Details
</li>
<li>
<div>
<div class="time">
<h2>2<br><span>April</span></h2>
</div>
<div class="details">
<h3>Celestial</h3>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Inventore nam veritatis facere deleniti corporis deserunt doloribus maxime. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Inventore nam veritatis facere deleniti corporis deserunt doloribus
maxime.Lorem ipsum dolor sit, amet consectetur adipisicing elit. Inventore nam veritatis facere deleniti corporis deserunt doloribus maxime.
</p>
</div>
</div>
View Details
</li>
</ul>
</div>
<div class="events copy">
<ul>
<li>
<div>
<div class="time">
<h2>2<br><span>April</span></h2>
</div>
<div class="details">
<h3>Celestial</h3>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Inventore nam veritatis facere deleniti corporis deserunt doloribus maxime.
</p>
</div>
</div>
View Details
</li>
<li>
<div>
<div class="time">
<h2>2<br><span>April</span></h2>
</div>
<div class="details">
<h3>Celestial</h3>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Inventore nam veritatis facere deleniti corporis deserunt doloribus maxime.
</p>
</div>
</div>
View Details
</li>
<li>
<div>
<div class="time">
<h2>2<br><span>April</span></h2>
</div>
<div class="details">
<h3>Celestial</h3>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Inventore nam veritatis facere deleniti corporis deserunt doloribus maxime. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Inventore nam veritatis facere deleniti corporis deserunt doloribus
maxime.Lorem ipsum dolor sit, amet consectetur adipisicing elit. Inventore nam veritatis facere deleniti corporis deserunt doloribus maxime.
</p>
</div>
</div>
View Details
</li>
</ul>
</div>
</section>
</body>
This question already has answers here:
Flexbox: center horizontally and vertically
(14 answers)
Closed 2 years ago.
I want the image to be over the paragraph, but they aren't in this code. is it enough to place elements below each other in html and they will be displayed below each other or not? Is the dosplay flex and aligning affecting the position so that's why the paragraphs aren't below the images?
.wrapper {
display: flex;
width: 100%;
}
.div {
width: 30%;
height: 300px;
display: flex;
align-items: center;
justify-content: center;
}
.image {
width: 20%;
height: 20%;
}
<div class="wrapper">
<div class="div div1">
<img src="https://external-content.duckduckgo.com/iu/?u=http%3A%2F%2Fclearmindarts.com%2Fwp-content%2Fuploads%2F2015%2F05%2Fbluesquare.jpg&f=1&nofb=1" class="image" />
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia facere neque suscipit incidunt ipsa veniam error, quisquam modi rerum? Voluptatum quia voluptas porro eius asperiores natus velit consequatur explicabo nihil.</p>
</div>
<div class="div div1">
<img src="https://external-content.duckduckgo.com/iu/?u=http%3A%2F%2Fclearmindarts.com%2Fwp-content%2Fuploads%2F2015%2F05%2Fbluesquare.jpg&f=1&nofb=1" class="image" />
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident, ipsam odio libero ullam facere neque voluptate repudiandae totam dignissimos non ducimus magni! Quidem et saepe expedita, distinctio commodi a temporibus.</p>
</div>
<div class="div div1">
<img src="https://external-content.duckduckgo.com/iu/?u=http%3A%2F%2Fclearmindarts.com%2Fwp-content%2Fuploads%2F2015%2F05%2Fbluesquare.jpg&f=1&nofb=1" class="image" />
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Mollitia, vero fuga! Corporis odio quo eligendi pariatur alias architecto dignissimos. Dolorem, perferendis quidem. Animi modi maxime expedita ad minus a voluptatem.</p>
</div>
</div>
You can force a specific order on flex-items using the order property. Also set flex-direction to column to ensure your elements are stacked vertically.
.wrapper {
width: 100%;
}
.div {
display: flex;
flex-direction: column;
width: 30%;
height: 300px;
display: flex;
align-items: center;
justify-content: center;
}
.image {
width: 20%;
height: 20%;
order: 1;
}
p {
order: 2;
}
<div class="wrapper">
<div class="div">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia facere neque suscipit incidunt ipsa veniam error, quisquam modi rerum? Voluptatum quia voluptas porro eius asperiores natus velit consequatur explicabo nihil.</p>
<img src="https://external-content.duckduckgo.com/iu/?u=http%3A%2F%2Fclearmindarts.com%2Fwp-content%2Fuploads%2F2015%2F05%2Fbluesquare.jpg&f=1&nofb=1" class="image" />
</div>
<div class="div">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident, ipsam odio libero ullam facere neque voluptate repudiandae totam dignissimos non ducimus magni! Quidem et saepe expedita, distinctio commodi a temporibus.</p>
<img src="https://external-content.duckduckgo.com/iu/?u=http%3A%2F%2Fclearmindarts.com%2Fwp-content%2Fuploads%2F2015%2F05%2Fbluesquare.jpg&f=1&nofb=1" class="image" />
</div>
<div class="div">
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Mollitia, vero fuga! Corporis odio quo eligendi pariatur alias architecto dignissimos. Dolorem, perferendis quidem. Animi modi maxime expedita ad minus a voluptatem.</p>
<img src="https://external-content.duckduckgo.com/iu/?u=http%3A%2F%2Fclearmindarts.com%2Fwp-content%2Fuploads%2F2015%2F05%2Fbluesquare.jpg&f=1&nofb=1" class="image" />
</div>
</div>
I have three divs in one container div. Second of them has got only text and it's height is dynamic depending of text height. First and third has got images and I want to fill out the rest of height that those 3 divs have the same height. How to set height of image to fill out the rest of remaining height??
When I set height 100% to image and parent div has got e.g. 600px , image is getting 600px too and it's overflowing content.
.offer-container {
display: flex;
justify-content: space-between;
> div {
width: 30%;
}
img {
height: 100%;
width: 100%;
object-fit: cover;
}
}
EDIT
<div className='offer-container'>
<div>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ipsum hic a nulla debitis adipisci cupiditate
velit deleniti sint obcaecati? Ex quia illum id facere nulla dolores, cupiditate veniam explicabo
excepturi?
</p>
<div>
<img src='/images/bgc.png' alt='' />
</div>
</div>
<div>text...</div>
<div><img src='/images/bgc.png' alt='' /></div>
</div>
Hey this would solve your problem:
.parent{
display: flex;
}
.child {
width: 350px;
}
.class-1 {
display: flex;
flex-direction: column;
}
#image{
width: 90%;
height:100%;
overflow: hidden;
flex-grow : 1;
position: relative;
}
#image img {
width: 100%;
height: auto;
position:absolute;
}
<div class="parent">
<div class=" child class-1">
<div class="text">
<p>asdsadasdsadasdasdasdasdaj sjflskdjfkasj flksadj flksadj flksadj flkasdj flkasdjfklasdj flkasdjflkas jflksadj lkasjfklasdj f</p>
</div>
<div id="image">
<!-- <div class="for-image" style = "background-image:url('https://rsvpify.com/wp-content/uploads/2017/02/wedding-day-couple-chicago.jpg')"> -->
<img src="https://rsvpify.com/wp-content/uploads/2017/02/wedding-day-couple-chicago.jpg" alt="">
</div>
</div>
<div class=" child 2">
<p>asdsadasdsadasdasdasdasdaj sjflskdjfkasj flksadj lkasjfklasdj fasdsadasdsadasdasdasdasdaj sjflskdjfkasj flksadj flksadj flksadj flkasdj flkasdjfklasdj flkasdjflkas jflksadj ldj flksadj flksadj flkasdj flkasdjfklasdj flkasdsadsads a das d aasdsadsaddasd as asd asd s ds das das das d ads asd asasdjflkas jflgsdvxzvxzcvzxcvzxv</p>
</div>
</div>
if you want to fiddle around here is the codepen link
Flex-grow fixed this problem
.parent{
display: flex;
justify-content: space-between;
}
.parent > div {
width: 48%;
}
.parent > div:first-child {
display: flex;
flex-direction: column
}
.image{
flex-grow: 1;
}
.image img {
width: 100%;
height: 100%;
object-fit: cover;
}
<div class="parent">
<div>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Aliquam accusamus necessitatibus unde ex modi
mollitia in est doloremque impedit, eligendi odit beatae quasi pariatur! Tempora doloribus maxime
inventore ipsum. Voluptates.</p>
<div class="image">
<img src="https://rsvpify.com/wp-content/uploads/2017/02/wedding-day-couple-chicago.jpg" alt="">
</div>
</div>
<div>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Aliquam accusamus necessitatibus unde ex modi
mollitia in est doloremque impedit, eligendi odit beatae quasi pariatur! Tempora doloribus maxime
inventore ipsum. Voluptates.
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Aliquam accusamus necessitatibus unde ex modi
mollitia in est doloremque impedit, eligendi odit beatae quasi pariatur! Tempora doloribus maxime
inventore ipsum. Voluptates.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Aliquam accusamus necessitatibus unde ex modi
mollitia in est doloremque impedit, eligendi odit beatae quasi pariatur! Tempora doloribus maxime
inventore ipsum. Voluptates.
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Aliquam accusamus necessitatibus unde ex modi
mollitia in est doloremque impedit, eligendi odit beatae quasi pariatur! Tempora doloribus maxime
inventore ipsum. Voluptates.</p>
</div>
</div>
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
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>
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>