-1

I have some problems with some 'div'-s. I have one div which contains two 'div's.

<div class="case-study-video-container">
   <div class="video-holder">
     <?php putRevSlider( '' ); ?>
   </div>
   <div class="content-holder">
     <div class="video-text-container">
        <h3>..</h3>
     </div>
   </div>
</div>

enter image description here

The 'case-study-video-container' contains the div for the video and the div with the text. The problem is that the div for the text is too big, it should have the height of the video. The video height is always ok, it should be responsive, but the div with the text is or too big, or too small. Can you give me some solution to resolve this problem? The div with text should have always the height of the div with video.

I use this css:

 .video-holder{
     height: 100% !important;
     width: 50%;
     display: inline-block;
     float: left;
     overflow: hidden;
 }

.content-holder {
     width: 50%;
     display: inline-block;
     float: left;
     overflow: hidden;
}

.video-text-container {
     height: auto;
     padding: 100px 30px;
 }

Thanks!

Orsi
  • 545
  • 2
  • 10
  • 27
  • Why do you have `height: 100% !important;` in `.video-holder`? Its height will (probably) depend on `case-study-video-container`. – KIKO Software Sep 15 '17 at 08:16
  • have you tried setting the `position` for `case-study-video-container`? or set a height for `content-holder` – rebecca Sep 15 '17 at 08:17
  • 3
    put working example, hard to guess what's going on – masterpreenz Sep 15 '17 at 08:17
  • Possible duplicate of [How do I keep two divs that are side by side the same height?](https://stackoverflow.com/questions/2997767/how-do-i-keep-two-divs-that-are-side-by-side-the-same-height) – HD.. Sep 15 '17 at 08:28

1 Answers1

1

add following css to parent fiddle

.case-study-video-container{
       display:flex;
       align-items: center;
 }
Znaneswar
  • 3,329
  • 2
  • 16
  • 24