Column height of widow on resize - html

Question

I am stuck, I want to make the height of my left column equal to the height of the right column . Seems the problem is the width of my video but I know how to fix this issue
I put in code this :
#font-face {
font-family: "poppins-bold";
src: url('../css/fonts/Poppins-Bold.ttf');
}
#font-face {
font-family: "poppins-light";
src: url('../css/fonts/Poppins-Light.ttf');
}
#font-face {
font-family: "poppins-medium";
src: url('../css/fonts/Poppins-Medium.ttf');
}
#font-face {
font-family: "poppins-regular";
src: url('../css/fonts/Poppins-Regular.ttf');
}
#font-face {
font-family: "poppins-semibold";
src: url('../css/fonts/Poppins-SemiBold.ttf');
}
body {
margin: 0;
background-color: #0080b9;
}
.conteneur {
min-width: 1050px;
}
.light {
font-family: "poppins-light";
}
.video-cover {
width: 100%;
height: 175px;
background-color: gray;
margin-top: 10px;
margin-bottom: 50px;
}
#bloc-gauche {
background-color: white;
width: 25%;
float: left;
/*height: 900px;*/
height: 100vh;
color: #0080b9;
font-family: "poppins-semibold";
overflow: scroll;
/*
padding-left:20px;
padding-right:20px;
padding-top:20px;
*/
}
.wrapper-bloc-gauche {
padding-left: 30px;
padding-right: 30px;
padding-top: 30px;
}
#intro {
width: 185px;
margin-bottom: 50px;
}
#content-bloc-droite {
padding-top: 25px;
}
#bloc-droite {
background-color: #0080b9;
width: 75%;
float: right;
font-family: "poppins-semibold";
color: white;
background-repeat: repeat-x;
}
.center-block {
display: block;
margin-right: auto;
margin-left: auto;
}
#description {
font-size: 15px;
text-align: center;
width: 45%;
margin-top: 25px;
}
.video-player-container {
/*width:40%;*/
display: block;
margin-right: auto;
margin-left: auto;
margin-top: 50px;
margin-bottom: 40px;
}
.video-player {
width: 100%;
border: 5px solid #ECECEC;
box-sizing: border-box;
}
.footer-bloc-droite {
text-align: center;
padding-left: 30px;
padding-right: 30px;
overflow: hidden;
}
#logo-joon {
float: left;
width: 200px;
}
#btn-xp {
display: inline-block;
margin: 0 auto;
background-color: white;
padding-right: 15px;
padding-left: 15px;
padding-top: 10px;
padding-bottom: 10px;
color: #0080b9;
}
#joon-p {
float: right;
width: 200px;
}
#joon-p-img {
/*transform: rotate(-20deg);
padding-bottom: 0px;
-webkit-transform-origin-x: -55px;
overflow: hidden;
*/
-webkit-transform-origin-x: -55px;
width: 95%;
}
#left-block {
float: left;
}
#right-block {
float: right;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class='conteneur'>
<div id='bloc-gauche'>
<div class='wrapper-bloc-gauche'>
<div class='row'>
<div id='intro'>
Vivez l'intégralité d'un voyage JOON avec Maxime Gasteuil
</div>
</div>
<div id='playlist'>
<div class='video-preview'>
<div class='video-title'>Ep 1 <span class='light'>Lorem Ipsum dolores sit amet</span></div>
<div class='video-cover'></div>
</div>
</div>
<div id='playlist'>
<div class='video-preview'>
<div class='video-title'>Ep 2 <span class='light'>Lorem Ipsum dolores sit amet</span></div>
<div class='video-cover'></div>
</div>
</div>
<div id='playlist'>
<div class='video-preview'>
<div class='video-title'>Ep 3 <span class='light'>Lorem Ipsum dolores sit amet</span></div>
<div class='video-cover'></div>
</div>
</div>
<div id='playlist'>
<div class='video-preview'>
<div class='video-title'>Ep 4 <span class='light'>Lorem Ipsum dolores sit amet</span></div>
<div class='video-cover'></div>
</div>
</div>
</div>
</div>
<div id='bloc-droite'>
<div id='content-bloc-droite'>
<div class='row'>
<img src='http://94.23.46.98/img/logo-qpV2.png' style='width:25%;' class='center-block'>
</div>
<div class='row'>
<div id='description' style='text-align:center;' class='center-block'>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis veritatis, fugit quia repudiandae est dignissimos modi expedita ullam totam, aliquid odit voluptas omnis dolores nemo nam
</div>
</div>
<div class='row'>
<div class='video-player-container center-bloc'>
<video controls class='video-player center-block' style='min-width:475px;max-width:40%;'>
<source src='http://web1.fr-hmd.com/adpulse/videos-adpulse/joon-1.mp4' type="video/mp4">
</video>
</div>
</div>
<div class='footer-bloc-droite'>
<div class='row'>
<div id='logo-joon'>
<img src='http://94.23.46.98/img/logo-joon.png' width='150px;'>
</div>
<div id='btn-xp'>
Démarrer l'expérience de voyage
</div>
<div id='joon-p'>
<img src='http://94.23.46.98/img/logo-pV2.png' width='240px;' id='joon-p-img'>
</div>
<div style='clear:both'></div>
</div>
</div>
</div>
</div>
<div style='clear:both'></div>
</div>
I have a another little problem: I wanted to put the plane little up.
I tried to use position:absolute but all other element is not centered.

Answer 1

You provided so much code, that is useless and as you can no one cared to fix your issue, anyway all i'm going to say is that i tried to add certain height:100% and height:100vh on some wrapper elements and it should work now.
#font-face {
font-family: "poppins-bold";
src: url('../css/fonts/Poppins-Bold.ttf');
}
#font-face {
font-family: "poppins-light";
src: url('../css/fonts/Poppins-Light.ttf');
}
#font-face {
font-family: "poppins-medium";
src: url('../css/fonts/Poppins-Medium.ttf');
}
#font-face {
font-family: "poppins-regular";
src: url('../css/fonts/Poppins-Regular.ttf');
}
#font-face {
font-family: "poppins-semibold";
src: url('../css/fonts/Poppins-SemiBold.ttf');
}
body {
margin: 0;
background-color: #0080b9;
}
.conteneur {
min-width: 1050px;
height: 100vh;
}
.light {
font-family: "poppins-light";
}
.video-cover {
width: 100%;
height: 175px;
background-color: gray;
margin-top: 10px;
margin-bottom: 50px;
}
#bloc-gauche {
background-color: white;
width: 25%;
float: left;
/* height: 900px; */
height: 100vh;
color: #0080b9;
font-family: "poppins-semibold";
overflow: scroll;
/*
padding-left:20px;
padding-right:20px;
padding-top:20px;
*/
}
.wrapper-bloc-gauche {
padding-left: 30px;
padding-right: 30px;
padding-top: 30px;
max-height: 100%;
}
#intro {
width: 185px;
margin-bottom: 50px;
}
#content-bloc-droite {
padding-top: 25px;
max-height: 100%;
overflow: auto;
}
#bloc-droite {
background-color: #0080b9;
width: 75%;
float: right;
font-family: "poppins-semibold";
color: white;
background-repeat: repeat-x;
height: 100%;
}
.center-block {
display: block;
margin-right: auto;
margin-left: auto;
}
#description {
font-size: 15px;
text-align: center;
width: 45%;
margin-top: 25px;
}
.video-player-container {
/*width:40%;*/
display: block;
margin-right: auto;
margin-left: auto;
margin-top: 50px;
margin-bottom: 40px;
}
.video-player {
width: 100%;
border: 5px solid #ECECEC;
box-sizing: border-box;
}
.footer-bloc-droite {
text-align: center;
padding-left: 30px;
padding-right: 30px;
overflow: hidden;
}
#logo-joon {
float: left;
width: 200px;
}
#btn-xp {
display: inline-block;
margin: 0 auto;
background-color: white;
padding-right: 15px;
padding-left: 15px;
padding-top: 10px;
padding-bottom: 10px;
color: #0080b9;
}
#joon-p {
float: right;
width: 200px;
}
#joon-p-img {
/*transform: rotate(-20deg);
padding-bottom: 0px;
-webkit-transform-origin-x: -55px;
overflow: hidden;
*/
-webkit-transform-origin-x: -55px;
width: 95%;
}
#left-block {
float: left;
}
#right-block {
float: right;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
<div class='conteneur'>
<div id='bloc-gauche'>
<div class='wrapper-bloc-gauche'>
<div class='row'>
<div id='intro'>
Vivez l'intégralité d'un voyage JOON avec Maxime Gasteuil
</div>
</div>
<div id='playlist'>
<div class='video-preview'>
<div class='video-title'>Ep 1 <span class='light'>Lorem Ipsum dolores sit amet</span></div>
<div class='video-cover'></div>
</div>
</div>
<div id='playlist'>
<div class='video-preview'>
<div class='video-title'>Ep 2 <span class='light'>Lorem Ipsum dolores sit amet</span></div>
<div class='video-cover'></div>
</div>
</div>
<div id='playlist'>
<div class='video-preview'>
<div class='video-title'>Ep 3 <span class='light'>Lorem Ipsum dolores sit amet</span></div>
<div class='video-cover'></div>
</div>
</div>
<div id='playlist'>
<div class='video-preview'>
<div class='video-title'>Ep 4 <span class='light'>Lorem Ipsum dolores sit amet</span></div>
<div class='video-cover'></div>
</div>
</div>
</div>
</div>
<div id='bloc-droite'>
<div id='content-bloc-droite'>
<div class='row'>
<img src='http://94.23.46.98/img/logo-qpV2.png' style='width:25%;' class='center-block'>
</div>
<div class='row'>
<div id='description' style='text-align:center;' class='center-block'>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis veritatis, fugit quia repudiandae est dignissimos modi expedita ullam totam, aliquid odit voluptas omnis dolores nemo nam
</div>
</div>
<div class='row'>
<div class='video-player-container center-bloc'>
<video controls class='video-player center-block' style='min-width:475px;max-width:40%;'>
<source src='http://web1.fr-hmd.com/adpulse/videos-adpulse/joon-1.mp4' type="video/mp4">
</video>
</div>
</div>
<div class='footer-bloc-droite'>
<div class='row'>
<div id='logo-joon'>
<img src='http://94.23.46.98/img/logo-joon.png' width='150px;'>
</div>
<div id='btn-xp'>
Démarrer l'expérience de voyage
</div>
<div id='joon-p'>
<img src='http://94.23.46.98/img/logo-pV2.png' width='240px;' id='joon-p-img'>
</div>
<div style='clear:both'></div>
</div>
</div>
</div>
</div>
<div style='clear:both'></div>
</div>