nxl4
Reputation: 734
How to make Divs same height across an entire row?
Working off of the CSS Image Gallery code from W3Schools, I've got a workable way of presenting an image gallery composed of containers. The containers all have text elements that will vary in length. This is leading to each row having div containers of equal width, but unequal heights. I'd like to standardize the height across an entire row.
Based on the code I'm working with, what CSS changed can effect that?
<!DOCSTRING html>
<html>
<style>
div.gallery {
border: 1px solid #ccc;
}
div.gallery:hover {
border: 1px solid #777;
}
div.gallery img {
width: 100%;
height: auto;
}
div.desc {
padding: 15px;
text-align: center;
font-size: 12px;
}
* {
box-sizing: border-box;
}
.responsive {
padding: 0 6px;
float: left;
width: 24.99999%;
margin: 6px 0;
}
@media only screen and (max-width: 700px) {
.responsive {
width: 49.99999%;
margin: 6px 0;
}
}
@media only screen and (max-width: 500px) {
.responsive {
width: 100%;
}
}
.clearfix:after {
content: "";
display: table;
clear: both;
}
</style>
<body>
<div class="responsive">
<div class="gallery">
<a href="vid_01.mp4">
<img src="cover_01.png">
</a>
<div class="desc">
<p>Variable text...</p>
</div>
</div>
</div>
<div class="responsive">
<div class="gallery">
<a href="vid_02.mp4">
<img src="cover_02.png">
</a>
<div class="desc">
<p>Variable text...</p>
</div>
</div>
</div>
<div class="responsive">
<div class="gallery">
<a href="vid_03.mp4">
<img src="cover_03.png">
</a>
<div class="desc">
<p>Variable text...</p>
</div>
</div>
</div>
</body>
</html>
EDIT (22:48 12/30/2019): Here's a JSFiddle demonstrating the issue. And here's an image:
Upvotes: 0
Views: 111
Answers (3)
Aman
Reputation: 1550
Can do with Flex CSS property. Use below Css or Find Codepan Link
<!DOCTYPE html>
<html>
<style>
.responsive{
display: flex;
flex-wrap: wrap;
}
div.gallery {
border: 1px solid #ccc;
}
div.gallery:hover {
border: 1px solid #777;
}
div.gallery img {
width: 100%;
height: auto;
}
div.desc {
padding: 15px;
text-align: center;
font-size: 12px;
}
* {
box-sizing: border-box;
}
.gallery {
padding: 5px;
float: left;
width: 23.99999%;
margin: 5px .5%;
}
@media only screen and (max-width: 700px) {
.gallery {
width: 48.99999%;
}
}
@media only screen and (max-width: 500px) {
.gallery {
width: 100%;
margin: 5px 0;
}
}
.clearfix:after {
content: "";
display: table;
clear: both;
}
</style>
<body>
<div class="responsive">
<div class="gallery">
<a href="vid_01.mp4">
<img src="http://www.philologia.io/img/home.png">
</a>
<div class="desc">
<p>Variable text...</p>
<p>Variable text...</p>
<p>Variable text...</p>
<p>Variable text...</p>
<p>Variable text...</p>
<p>Variable text...</p>
<p>Variable text...</p>
</div>
</div>
<div class="gallery">
<a href="vid_02.mp4">
<img src="http://www.philologia.io/img/home.png">
</a>
<div class="desc">
<p>Variable text...</p>
</div>
</div>
<div class="gallery">
<a href="vid_03.mp4">
<img src="http://www.philologia.io/img/home.png">
</a>
<div class="desc">
<p>Variable text...</p>
<p>Variable text...</p>
<p>Variable text...</p>
</div>
</div>
<div class="gallery">
<a href="vid_03.mp4">
<img src="http://www.philologia.io/img/home.png">
</a>
<div class="desc">
<p>Variable text...</p>
<p>Variable text...</p>
<p>Variable text...</p>
<p>Variable text...</p>
<p>Variable text...</p>
<p>Variable text...</p>
<p>Variable text...</p>
</div>
</div>
<div class="gallery">
<a href="vid_03.mp4">
<img src="http://www.philologia.io/img/home.png">
</a>
<div class="desc">
<p>Variable text...</p>
<p>Variable text...</p>
<p>Variable text...</p>
</div>
</div>
<div class="gallery">
<a href="vid_03.mp4">
<img src="http://www.philologia.io/img/home.png">
</a>
<div class="desc">
<p>Variable text...</p>
<p>Variable text...</p>
<p>Variable text...</p>
<p>Variable text...</p>
<p>Variable text...</p>
<p>Variable text...</p>
<p>Variable text...</p>
<p>Variable text...</p>
<p>Variable text...</p>
<p>Variable text...</p>
<p>Variable text...</p>
<p>Variable text...</p>
<p>Variable text...</p>
</div>
</div>
</div>
</body>
</html>
https://codepen.io/rvtech/pen/qBEPrRr
Upvotes: 0
Tom T
Reputation: 361
I would use flexbox for this; I adjusted some of your markup and CSS to incorporate it.
Here's a codepen: https://codepen.io/tillytoby/full/yLyzVWp
HTML:
<div class="container">
<div class="responsive">
<div class="gallery">
<a href="vid_01.mp4">
<img src="https://via.placeholder.com/150">
</a>
<div class="desc">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
</div>
<div class="responsive">
<div class="gallery">
<a href="vid_02.mp4">
<img src="https://via.placeholder.com/150">
</a>
<div class="desc">
<p>Variable text...</p>
</div>
</div>
</div>
<div class="responsive">
<div class="gallery">
<a href="vid_03.mp4">
<img src="https://via.placeholder.com/150">
</a>
<div class="desc">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</div>
</div>
CSS:
* {
box-sizing: border-box;
}
.container {
display: flex;
flex-wrap: wrap;
}
.responsive {
display: flex;
}
.gallery {
border: 1px solid #ccc;
flex-grow: 1;
}
.gallery:hover {
border: 1px solid #777;
}
.gallery img {
width: 100%;
height: auto;
}
.desc {
padding: 15px;
text-align: center;
font-size: 12px;
}
.responsive {
width: 25%;
padding: 6px;
}
@media only screen and (max-width: 700px) {
.responsive {
width: 50%;
}
}
@media only screen and (max-width: 500px) {
.responsive {
width: 100%;
}
}
.clearfix:after {
content: "";
display: table;
clear: both;
}
Note the added .container with display: flex;. Each .responsive div also has display: flex; so that we can make .gallery a flex-item and use flex-grow to stretch it if there's any extra room.
Another thing to note: I replaced your margins with padding and used rounder numbers instead (25%, 50%, 100%). Since we're using border-box, the padding is included in the width of each responsive div, so we don't have to do any nasty calculations with width and margin.
Upvotes: 2
Kunal Mahajan
Reputation: 60
Just refer the below code. I have just taken a parent div and given width as 100% and height as inherit for the parent div. Using flex, it will equally distribute the width proportion amongst the child div's. Now to make same height for all the child div's it was just a simple task make their height as 100%.
<html>
<style>
.parent-div{
width: 100%;
height: inherit;
display: flex;
}
div.gallery {
border: 1px solid #ccc;
height: 100%;
}
div.gallery:hover {
border: 1px solid #777;
}
div.gallery img {
width: 100%;
height: auto;
}
div.desc {
padding: 15px;
text-align: center;
font-size: 12px;
}
* {
box-sizing: border-box;
}
.responsive {
padding: 0 6px;
float: left;
width: 24.99999%;
margin: 6px 0;
}
@media only screen and (max-width: 700px) {
.responsive {
width: 49.99999%;
margin: 6px 0;
}
}
@media only screen and (max-width: 500px) {
.responsive {
width: 100%;
}
}
.clearfix:after {
content: "";
display: table;
clear: both;
}
</style>
<body>
<div class="parent-div">
<div class="responsive">
<div class="gallery">
<a href="vid_01.mp4">
<img src="http://www.philologia.io/img/home.png">
</a>
<div class="desc">
<p>Variable text...</p>
<p>Variable text...</p>
<p>Variable text...</p>
<p>Variable text...</p>
<p>Variable text...</p>
<p>Variable text...</p>
<p>Variable text...</p>
</div>
</div>
</div>
<div class="responsive">
<div class="gallery">
<a href="vid_02.mp4">
<img src="http://www.philologia.io/img/home.png">
</a>
<div class="desc">
<p>Variable text...</p>
</div>
</div>
</div>
<div class="responsive">
<div class="gallery">
<a href="vid_03.mp4">
<img src="http://www.philologia.io/img/home.png">
</a>
<div class="desc">
<p>Variable text...</p>
<p>Variable text...</p>
<p>Variable text...</p>
</div>
</div>
</div>
<div class="responsive">
<div class="gallery">
<a href="vid_03.mp4">
<img src="http://www.philologia.io/img/home.png">
</a>
<div class="desc">
<p>Variable text...</p>
<p>Variable text...</p>
<p>Variable text...</p>
<p>Variable text...</p>
<p>Variable text...</p>
<p>Variable text...</p>
<p>Variable text...</p>
</div>
</div>
</div>
<div class="responsive">
<div class="gallery">
<a href="vid_03.mp4">
<img src="http://www.philologia.io/img/home.png">
</a>
<div class="desc">
<p>Variable text...</p>
<p>Variable text...</p>
<p>Variable text...</p>
</div>
</div>
</div>
<div class="responsive">
<div class="gallery">
<a href="vid_03.mp4">
<img src="http://www.philologia.io/img/home.png">
</a>
<div class="desc">
<p>Variable text...</p>
<p>Variable text...</p>
<p>Variable text...</p>
<p>Variable text...</p>
<p>Variable text...</p>
<p>Variable text...</p>
<p>Variable text...</p>
<p>Variable text...</p>
<p>Variable text...</p>
<p>Variable text...</p>
<p>Variable text...</p>
<p>Variable text...</p>
<p>Variable text...</p>
</div>
</div>
</div>
</div>
</body>
</html>
Hope my solution helps you out... :-)
Upvotes: 0
Related Questions
- How can I make divs inside of a column equal-height?
- HTML table: how to make all rows equal height?
- How can get adjacent divs to match the height of the highest div in the row?
- I need each row to have same height
- make divs equal height across row
- How to make table rows/cells have the same fixed height without inner div in it?
- How to get div columns to be same height?
- Make multiple divs of equal height when they aren't always on the same line
- Setting all DIVS on the same row to be the same height ... but different for each row
- Making a row of divs all be the same height using CSS