dopasowywanie div względem siebie

Question

Witam piszę prostą stronkę internetową . Niestety nie mogę rozwiązać problemu. Chcę żeby dwa divy (leftPanel, rightPanel) będące obok siebie , zawsze dostosowywały swoją wysokość względem siebie.  Używalem display:table  oraz hidden overflow noi bez efektu ( w 2 przypadku zjada mi stopkę ). Proszę o pomoc !

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
  margin:0;
  padding:0;
  border:0;
  font-size:100%;
  font:inherit;
  vertical-align:baseline;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  display:block;
}

body {
  line-height:1;
}

ul, ol {
  list-style:none;
}

blockquote, q {
  quotes:none;
}

blockquote:before, blockquote:after, q:before, q:after {
  content:'';
  content:none;
}

table {
  border-collapse:collapse;
  border-spacing:0;
}


body{
    
   background-color: #EDDCC7; 
}

#calosc
{
    
    width:70%;
    margin-left:auto;
    margin-right:auto;
    
    overflow:hidden;
}

#header
{
height:30%;
background-color: black;

}

#foto{
   
    height:350px;;
    width:100%;
}


.zdjeciePensjonatu{
    width:250px;
    height:250px;
    
    
    
}
#middle{
    
   
    height: 60%;
    
}


#topmenu
{
    padding:10px; 
    height:40px;
    width:100%;
    background-color:#82272B;
}

#menu{
    position:sticky;
    
    
}

#srodek{
    
   
    height:40px;
    text-align:center;
}

ol{
    padding:0;
    margin:0;
    font-size:18px;
    height:35px;
    line-height:200%;
    list-style-type: none;
    display:inline-block;
    
}

ol a{
    
   display:block;
   text-decoration: none;
   color:white;
   
    
}

ol > li{
    
    float:left;
    width:20%;
    height:40px;
    width:150px;
    border: 1px white solid;
   border-radius:50%;
    
}



ol > li:hover > a{
    color: black;
    border:1px solid white;
    border-radius: 50%;
    background-color: #EFECE1;
}




#leftPanel{
    background-color:#EFECE1 ;
    width:65%;
    padding:20px;
    float:left;
    box-sizing:border-box;
    display:table-cell;
   overflow:hidden;
padding-bottom: 20000px;
margin-bottom: -20000px;

}



#rightPanel{
    
  background-color:#B7B192;   
    box-sizing:border-box; 
    padding:20px;
    float:left;
    width:35%;
    overflow:hidden;
padding-bottom: 20000px;
margin-bottom: -20000px;
   
   
}



#leftPanel img{
-webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease;
}
#leftPanel img:hover {
-o-transition: all 0.6s;
-moz-transition: all 0.6s;
-webkit-transition: all 0.6s;
-moz-transform: scale(1.2);
-o-transform: scale(1.2);
-webkit-transform: scale(1.2);
}



#footer{
    
    background-color: gray;
    height:10%;
    text-align: center;
}

.czcionkaMala{
    
    text-align: justify;
   font-family:courier;
   font-style: bold;
    margin: 40px;
    
}

.czcionkaDuza{
    
    text-align: center;
    margin: 30px;
    
    
}

table td{
    
    border:2px solid black;
    
}

 

 

Answer 1

Jesli używasz float musisz pamiętać o czyszczeniu go właściwością css clear:both; jesli chcesz to wykonać po nowemu usuń float i dla rodzica tych dwóch diwow ustaw display: flex

 

Answer 2

Względem siebie to raczej w js, ale względem rodzica to już bardziej.

Służy do tego align-item: stretch; Jeżeli korzystasz z flexboxa.

   <div class="container">
      <div class="leftPanel"></div>
      <div class="rightPanel"></div>
  </div>

body{
  background-color: black;
}
.container{
  width: 80%;
  height: 500px;
  margin: 0 auto;
  display: flex;
  align-item: stretch;
  justify-content:  center;
  background-color: green;
}
.leftPanel{
  background-color: red;
  flex-basis: 40%;
}
.rightPanel{
  background-color: blue;
  flex-basis: 40%;
}

Cel zostanie osiągnięty. Ponieważ jeżeli jeden z boksów będzie się zwiększał, to kontener również. A więc i drugi boks  będzie podążał za nimi.

Kompletny przewodnik po Flexbox