KevInSol KevInSol - 27 days ago 10
CSS Question

Carousel, make a div within an item same height as sibling item's div

I have an responsive Owl Carousel (v2), each item or slide has an image and below that some text of variable length, see image below:

enter image description here

As can be seen, all the images are bottom aligned to the same baseline, regardless of how much text there is. I've done this by setting the text div to a fixed height. The problem is, if there were to be just one line of text, I'd have unnecessary space below the carousel.

If I allow the div to set its own height, I get this:

enter image description here

So my images are no longer lined up.

HTML




<div>
<img class='a4_diary_image' src='sizes/test.png'>
<div class='owl_diary_desc'>
A4 size, this is going on to two lines
</div>
</div>

<div>
<img class='a5_diary_image' src='sizes/test.png'>
<div class='owl_diary_desc'>
A5 size
</div>
</div>

<div>
<img class='a6_diary_image' src='sizes/test.png'>
<div class='owl_diary_desc'>
A6 size
</div>
</div>

</div>




CSS

.owl-carousel .owl-item {
display: table-cell;
float: none;
text-align: center;
vertical-align: bottom;
border: 1px dashed grey;
height: 100%;
padding: 0px 10px;
}


.owl_diary_desc {
font-size: 19px;
border: 1px dashed red;
margin-top:10px;
}




.a4_diary_image {
max-width: 100%;
max-height: 100%;
margin-left: auto;
margin-right: auto;
}


.a5_diary_image {
max-width: 70%;
max-height: 70%;
margin-left: auto;
margin-right: auto;
}


.a6_diary_image {
max-width: 50%;
max-height: 50%;
margin-left: auto;
margin-right: auto;
}

Answer

Straight HTML and CSS won't allow you to set equal heights based off siblings. Using a little jquery this can be achieved though.

$maxDesc;
function equalize(){
    $('.owl_diary_desc').each(function(i){
        if ($(this).height() > $maxDesc) { $maxDesc = $(this).height();}
    });

    $('.owl_diary_desc').each(function(i){$(this).height($maxDesc);});
}

When I use something like this, I generally move the variable holder to the beginning of the script. Then I call the function on document ready. Sometimes I'll even call it on the window resize function. If you choose to do that, you must call an each function on your object and reset the height to auto before recalling the equalize function.

Comments