title: Issue with columns + carousel not equal in height in Bootstrap 3
body: <p>I hope someone can help me out with a Bootstrap 3 problem I am experiencing.</p>
  
  <p>A screenshot explains the problem way better, than I can explain in English. So, please, see below.</p>
  
  <p><img src="https://i.stack.imgur.com/uCPCL.jpg" alt="Bootstrap 3 colum equal/matching height problem"></p>
  
  <p>As you can see I have 2 columns on the left side and 1 on the right together with the Bootstrap carousel. But the problem is, I am getting empty (white) space under the left column.</p>
  
  <p>I would like the right column + carousel match the left columns in height. So everything is aligned. The left columns have the correct height (there is already text content in them in my real design). I think this should be possible, but I have no clue on how to achieve this.</p>
  
  <p>I tried several weird things myself, though it works for one browser, it obviously doesn't work for the other. So I am looking for a solution for this. I think it's possible by making some changes to the carousel?</p>
  
  <p>Since this is only a (small) part of the full website I am working on, I will paste the necessary code. Maybe someone can take a look and come up with a solution or idea?</p>
  
  <p>(please ignore the inline stuff, I am still testing some stuff before I add classes to them)</p>
  
  <p>Partial HTML code:</p>
  
  <pre><code>&lt;div class="row clearfix no-gutter"&gt;
      &lt;div class="col-md-7 column"&gt;
          &lt;div class="row clearfix"&gt;
              &lt;div class="col-md-12 column"&gt;
                  &lt;div class="box-contents fontsize938"&gt;
                          &lt;div style="float:right;font-size:0.938em;padding-top:10px;color:#777;"&gt;subtitleright&lt;/div&gt;
                          &lt;img src="images/mini_logo.png" width="21" height="22" class="minilogo" alt=""/&gt;&lt;h4&gt;Header&lt;/h4&gt;
                          &lt;div class="multiColumn"&gt;
                          &lt;ul class="webss"&gt;
                              &lt;li&gt;&lt;span class="glyphicon glyphicon-play smallglyph" aria-hidden="true"&gt;&lt;/span&gt; Ipsum Lorem stuff&lt;/li&gt;
                              &lt;li&gt;&lt;span class="glyphicon glyphicon-play smallglyph" aria-hidden="true"&gt;&lt;/span&gt; Ipsum Lorem stuff&lt;/li&gt;
                              &lt;li&gt;&lt;span class="glyphicon glyphicon-play smallglyph" aria-hidden="true"&gt;&lt;/span&gt; Ipsum Lorem stuff&lt;/li&gt;
                              &lt;li&gt;&lt;span class="glyphicon glyphicon-play smallglyph" aria-hidden="true"&gt;&lt;/span&gt; Ipsum Lorem stuff&lt;/li&gt;
                              &lt;li&gt;&lt;span class="glyphicon glyphicon-play smallglyph" aria-hidden="true"&gt;&lt;/span&gt; Ipsum Lorem stuff&lt;/li&gt;
                              &lt;li&gt;&lt;span class="glyphicon glyphicon-play smallglyph" aria-hidden="true"&gt;&lt;/span&gt; Ipsum Lorem stuff&lt;/li&gt;
                              &lt;li&gt;&lt;span class="glyphicon glyphicon-play smallglyph" aria-hidden="true"&gt;&lt;/span&gt; Ipsum Lorem stuff&lt;/li&gt;
                              &lt;li&gt;&lt;span class="glyphicon glyphicon-play smallglyph" aria-hidden="true"&gt;&lt;/span&gt; Ipsum Lorem stuff&lt;/li&gt;
                              &lt;li&gt;&lt;span class="glyphicon glyphicon-play smallglyph" aria-hidden="true"&gt;&lt;/span&gt; Ipsum Lorem stuff&lt;/li&gt;
                              &lt;li&gt;&lt;span class="glyphicon glyphicon-play smallglyph" aria-hidden="true"&gt;&lt;/span&gt; Ipsum Lorem stuff&lt;/li&gt;
                          &lt;/ul&gt;
                          &lt;/div&gt;
                          &lt;div style="height:22px;padding:2px 8px 0 7px;"&gt;
                              &lt;div style="float:left;"&gt;&lt;a class="weblink" href="info.php" title="Ipsum Lorem stuff" target="_parent"&gt;&lt;span class="glyphicon glyphicon-info-sign" aria-hidden="true"&gt;&lt;/span&gt;&amp;nbsp; Ipsum Lorem stuff&lt;/a&gt;&lt;/div&gt;
                              &lt;div style="float:right;"&gt;&lt;a class="weblink" href="best.php" title="Ipsum Lorem stuff" target="_parent"&gt;&lt;span class="glyphicon glyphicon-shopping-cart" aria-hidden="true"&gt;&lt;/span&gt;&amp;nbsp; Ipsum Lorem stuff&lt;/a&gt;&lt;/div&gt;
                          &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="row clearfix"&gt;
              &lt;div class="col-md-12 column"&gt;
                  &lt;div class="box-contents fontsize938"&gt;
                          &lt;div style="float:right;font-size:0.938em;padding-top:10px;color:#777;"&gt;subtitleright&lt;/div&gt;
                          &lt;img src="images/mini_logo.png" width="21" height="22" class="minilogo" alt=""/&gt;&lt;h4&gt;Header&lt;/h4&gt;
                          &lt;div class="multiColumn"&gt;
                          &lt;ul class="webss"&gt;
                              &lt;li&gt;&lt;span class="glyphicon glyphicon-play smallglyph" aria-hidden="true"&gt;&lt;/span&gt; Ipsum Lorem stuff&lt;/li&gt;
                              &lt;li&gt;&lt;span class="glyphicon glyphicon-play smallglyph" aria-hidden="true"&gt;&lt;/span&gt; Ipsum Lorem stuff&lt;/li&gt;
                              &lt;li&gt;&lt;span class="glyphicon glyphicon-play smallglyph" aria-hidden="true"&gt;&lt;/span&gt; Ipsum Lorem stuff&lt;/li&gt;
                              &lt;li&gt;&lt;span class="glyphicon glyphicon-play smallglyph" aria-hidden="true"&gt;&lt;/span&gt; Ipsum Lorem stuff&lt;/li&gt;
                              &lt;li&gt;&lt;span class="glyphicon glyphicon-play smallglyph" aria-hidden="true"&gt;&lt;/span&gt; Ipsum Lorem stuff&lt;/li&gt;
                              &lt;li&gt;&lt;span class="glyphicon glyphicon-play smallglyph" aria-hidden="true"&gt;&lt;/span&gt; Ipsum Lorem stuff&lt;/li&gt;
                              &lt;li&gt;&lt;span class="glyphicon glyphicon-play smallglyph" aria-hidden="true"&gt;&lt;/span&gt; Ipsum Lorem stuff&lt;/li&gt;
                              &lt;li&gt;&lt;span class="glyphicon glyphicon-play smallglyph" aria-hidden="true"&gt;&lt;/span&gt; Ipsum Lorem stuff&lt;/li&gt;
                              &lt;li&gt;&lt;span class="glyphicon glyphicon-play smallglyph" aria-hidden="true"&gt;&lt;/span&gt; Ipsum Lorem stuff&lt;/li&gt;
                              &lt;li&gt;&lt;span class="glyphicon glyphicon-play smallglyph" aria-hidden="true"&gt;&lt;/span&gt; Ipsum Lorem stuff&lt;/li&gt;
                          &lt;/ul&gt;
                          &lt;/div&gt;
                          &lt;div style="height:22px;padding:2px 8px 0 7px;"&gt;
                              &lt;div style="float:left;"&gt;&lt;a class="weblink" href="info.php" title="Ipsum Lorem stuff" target="_parent"&gt;&lt;span class="glyphicon glyphicon-info-sign" aria-hidden="true"&gt;&lt;/span&gt;&amp;nbsp; Ipsum Lorem stuff&lt;/a&gt;&lt;/div&gt;
                              &lt;div style="float:right;"&gt;&lt;a class="weblink" href="best.php" title="Ipsum Lorem stuff" target="_parent"&gt;&lt;span class="glyphicon glyphicon-shopping-cart" aria-hidden="true"&gt;&lt;/span&gt;&amp;nbsp; Ipsum Lorem stuff&lt;/a&gt;&lt;/div&gt;
                          &lt;/div&gt;  
                  &lt;/div&gt;         
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="col-md-5"&gt;
          &lt;div class="row"&gt;
              &lt;div class="col-md-12"&gt;
                &lt;form method="post" action="req.php" id="checkd1" class="formd"&gt;
                  &lt;div class="input-group input-group-sm"&gt;
                      &lt;span class="input-group-addon broundleft"&gt;&lt;i class="glyphicon glyphicon-globe"&gt;&lt;/i&gt;&lt;/span&gt;
                      &lt;input type="text" class="form-control" name="webbb" placeholder="Ipsum Lorem stuff"&gt;
                      &lt;input type="hidden" name="request" value="single"&gt;
                      &lt;span class="input-group-btn"&gt;&lt;button class="btn btn-primary broundright" type="submit"&gt;&lt;i class="glyphicon glyphicon-search"&gt;&lt;/i&gt; &amp;nbsp;Check!&lt;/button&gt;&lt;/span&gt;
                  &lt;/div&gt;                
                &lt;/form&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="row"&gt;
              &lt;div class="col-md-12 column"&gt;
                  &lt;div id="carousel-index" class="carousel slide" data-ride="carousel"&gt;
                      &lt;div class="carousel-inner"&gt;
                          &lt;div class="item active"&gt;&lt;img src="images/gallery1.jpg" alt="Ipsum Lorem stuff"&gt;&lt;/div&gt;
                          &lt;div class="item"&gt;&lt;img src="images/gallery2.jpg" alt="Ipsum Lorem stuff"&gt;&lt;/div&gt;
                          &lt;div class="item"&gt;&lt;img src="images/gallery3.jpg" alt="Ipsum Lorem stuff"&gt;&lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>Carousel CSS:</p>
  
  <pre><code>.carousel-inner&gt;.item&gt;img, .carousel-inner&gt;.item&gt;a&gt;img{
  display:block;
  height:auto;
  max-width:100%;
  line-height:1;
  width:100%;
  overflow:hidden;
  border-radius:6px; 
  -moz-border-radius:6px; 
  -webkit-border-radius:6px;
  -khtml-border-radius:6px;
  border:1px solid #fff;
  }
  .carousel{
  border-radius:6px; 
  -moz-border-radius:6px; 
  -webkit-border-radius:6px;
  -khtml-border-radius:6px;
  border:1px solid #d5d5d5;
  -moz-box-shadow: 2px 2px 1px #e1e1e1;
  -webkit-box-shadow: 2px 2px 1px #e1e1e1;
  box-shadow: 2px 2px 1px #e1e1e1;
  overflow:hidden;
  }
  </code></pre>
  
  <p>If you need more stuff from me please ask. I am already glad that you are taking a look at this. Many thanks in advance...!</p>
  
  <p>//UPDATE #1</p>
  
  <p>As requested I created (my first) JSFiddle, which is located here: <a href="http://jsfiddle.net/Lx3pc7rm/1/" rel="nofollow noreferrer">http://jsfiddle.net/Lx3pc7rm/1/</a></p>
  
  <p>You have to resize the windows width (to a maximum) to see the problem I am experiencing. Also on smaller sizes the carousel is not matched to the left columns.</p>
  
  <p>//UPDATE #2</p>
  
  <p>Well I tried several solutions which are found on Stackoverflow and elsewhere, but non are working. I also tried setting "max-height:332px;" to the carousel. This works, but very limited. In Firefox it works, but other browsers not (size mismatch due to HTML/CSS probably). Also when window size becomes smaller the height is even more off (= smaller).</p>
  
  <p>I wish someone could provide a working solution whatsoever, maybe even by using javascript?</p>